<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>

<?php
/** @var \WriteTextAI\WriteTextAI\ViewModel\Tooltip $tooltip */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Permissions $permissions */
/** @var \WriteTextAI\WriteTextAI\ViewModel\TransferSettings $transferSettings */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Premium $premium */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Settings $settings */

$tooltip = $block->getTooltip();
$permissions = $block->getPermissions();
$transferSettings = $block->getTransferSettings();
$premium = $block->getPremium();
$settings = $block->getSettings();
$rules = $settings->getSettings('rules');
?>
<div class="wtai-gallery wtai-accordions" data-bind="scope: 'wtaiGallery'">
    <div class="wtai-accordion-block wtai-gallery-block">
        <div data-role="collapsible" class="admin__collapsible-block-wrapper">
            <div class="admin__collapsible-title" data-role="title">
                <div class="wtai-field">
                    <input type="checkbox"
                        class="admin__control-checkbox"
                        id="wtaiSelectAllImage"
                        data-bind="
                            checked: selectAllImages,
                            disable: images().length <= 0,
                            visible: images().length > 0,
                            click:  processClick
                        "
                    />
                    <label for="wtaiSelectAllImage" class="admin__field-label" data-bind="
                        attr: { 'for': images().length > 0 ? 'wtaiSelectAllImage' : null }
                    ">
                        <?= $escaper->escapeHtml(__('Image alt text')) ?>
                    </label>
                </div>
                <div class="admin__field-tooltip wtai-small">
                    <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                    <div class="admin__field-tooltip-content" data-target="dropdown">
                        <div class="wtai-content-wrapper">
                            <?= /* @noEscape */ $tooltip->getTooltip('wtai.alt.text') ?>
                        </div>
                    </div>
                </div>
                <div class="wtai-trigger" data-role="trigger"></div>
            </div>
        </div>
        <div data-role="content">
            <!--ko with: images -->
            <div class="wtai-no-images" data-bind="visible: $data.length == 0">
                <?= $escaper->escapeHtml(__('No image found.')) ?>
            </div>
            <!-- /ko -->
            <!-- ko foreach: images -->
            <div class="wtai-image-row">
                <div class="wtai-field-wrapper">
                    <div class="wtai-field">
                        <input type="checkbox"
                            class="admin__control-checkbox"
                            data-bind="
                                checked: $parent.selectedImages,
                                value: $data.id,
                                attr: { id: 'image-' + $data.id }
                            "
                        />
                        <label class="admin__field-label" data-bind="attr: { for: 'image-' + $data.id }">
                        </label>
                    </div>
                </div>
                <div class="wtai-image-wrapper" data-bind="click: function() { $parent.preview($data.orig_url) }">
                    <img data-bind="attr: { src: $data.url }">
                </div>
                <div class="wtai-field-wrapper">
                    <div class="wtai-field admin__field">
                        <label class="admin__field-label">
                            <span class="wtai-text-label wtai-long-text wtai-image-alt-text-label">
                                <?= $escaper->escapeHtml(__('WriteText.ai image alt text')) ?>
                                <span class="wtai-featured-status" data-bind="visible: $data.is_featured">
                                    <?= $escaper->escapeHtml(__('- Thumbnail')) ?>
                                </span>
                            </span>
                            <span class="wtai-generate-status" data-bind="hidden: $data.status.generated">
                                <?= $escaper->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                            </span>
                            <span class="wtai-generate-status" data-bind="visible: $data.status.generated">
                                <?= $escaper->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                            </span>
                            <span class="wtai-transfer-status wtai-not-transferred" data-bind="visible:
                                !$data.status.transferred &&
                                $data.status.generated
                            ">
                                <?= $escaper->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                            </span>
                            
                            <div class="wtai-feedback-visibility" data-bind="
                                    visible: $data.status.generated
                                ">
                                <?= /* @noEscape */ $block->getChildBlock('wtai.gallery.feedback')->toHtml();
                                ?>
                            </div>
                        </label>
                        <div class="wtai-control" data-bind="css: {
                            'wtai-disabled': $parent.isNotEditable(!$data.status.generated),
                            'wtai-highlighted' : $parent.highlighted
                        }">
                            <div class="wtai-highlight-mask wtai-small wtai-gallery-mask"
                                data-bind="
                                    css: { 'wtai-disabled' : $parent.isNotEditable(!$data.status.generated) },
                                    highlightWords: {
                                        keywords: $data.keywords,
                                        text: $data.writetext_alt,
                                        formalLanguages: $parent.formalLanguages,
                                        formalLanguageSupport: $parent.formalLanguageSupport,
                                        highlightPronouns: $parent.highlightPronouns,
                                        formal: $parent.formal,
                                        informal: $parent.informal,
                                        language: $parent.language,
                                        highlighted: $parent.highlighted,
                                        galleryImages: $parent.galleryImages,
                                        gallery: true,
                                        optimizationData: $parent.optimizationData,
                                        selectedKeywords: $parent.selectedKeywords
                                    }
                                "
                            ></div>
                            <textarea class="admin__control-textarea wtai-small"
                                data-bind="
                                    css: { 'wtai-disabled' : $parent.isNotEditable(!$data.status.generated) },
                                    attr: { id: 'writetext-alt-' + $data.id },
                                    disable: $parent.isNotEditable(!$data.status.generated),
                                    value: $data.writetext_alt,
                                    event: { input: function(data, event) { $parent.updateImage(data, event, $data) } }
                                "
                                <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                            ></textarea>
                            <div class="wtai-disabled-tooltip-wrapper" data-bind="
                                visible: $parent.isNotEditable(!$data.status.generated)
                            ">
                                <div class="wtai-disabled-tooltip">
                                    <div class="wtai-disabled-tooltip-content" data-bind="
                                        visible: !$data.status.generated
                                    ">
                                        <?= $escaper->escapeHtml(__('No text generated yet.')) ?>
                                    </div>
                                    <div class="wtai-disabled-tooltip-content" data-bind="
                                        visible: $parent.keywordAnalysisOngoing() && $data.status.generated
                                    ">
                                        <?= $escaper->escapeHtml(
                                            __('Editing is unavailable when keyword analysis is ongoing.')
                                        ) ?>
                                    </div>
                                </div>
                            </div>
                            <p class="wtai-text-length">
                                <span class="wtai-char-count" data-bind="
                                    text: $parent.getCharCount($data.writetext_alt)
                                "></span> | <span class="wtai-word-count" data-bind="
                                    text: $parent.getWordCount($data.writetext_alt)
                                "></span>
                            </p>
                        </div>
                    </div>
                    <?php if ($permissions->isTransferAllowed()): ?>
                        <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                            title: $parent.isImgAltTextFieldEnabled()($data.id) ?
                                '<?= $escaper->escapeHtmlAttr(__('Transfer')) ?>' :
                                '<?= $escaper->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                        }">
                            <button type="button" class="wtai-field-transfer" data-bind="
                                enable: $parent.isImgAltTextFieldEnabled()($data.id)
                                    && !$parent.keywordAnalysisOngoing()
                                    && !$parent.isKoRefreshing(),
                                attr: { id: 'writetext-alt-transfer-' + $data.id },
                                click: function() { $parent.transfer($data) }
                            "></button>
                        </div>
                    <?php endif; ?>
                    <div class="wtai-field admin__field">
                        <label class="admin__field-label wtai-strong">
                            <?= $escaper->escapeHtml(__('Magento image alt text')) ?>
                        </label>
                        <div class="wtai-control">
                            <div class="wtai-value-wrapper wtai-current wtai-small"
                                data-bind="text: $data.alt"></div>
                            <p class="wtai-text-length">
                                <span class="wtai-char-count" data-bind="
                                    text: $parent.getCharCount($data.alt)
                                "></span> | <span class="wtai-word-count" data-bind="
                                    text: $parent.getWordCount($data.alt)
                                "></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /ko -->
            <div class="wtai-gallery-loading-mask"></div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiGallery": {
                        "component": "WriteTextAI_WriteTextAI/js/edit/gallery",
                        "confirmContent": "<?= $escaper->escapeJs($transferSettings->getConfirmContent()) ?>",
                        "transferUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/image_transfer')) ?>",
                        "saveUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "feedbackUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/feedback')) ?>",
                        "deleteFeedbackUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/feedback_delete')) ?>",
                        "textLimit": "<?= $escaper->escapeJs($rules['maxFeedbackCharacters']) ?>",
                        "entityType": "<?= $escaper->escapeJs($block->getEntityType()) ?>",
                        "getImagesUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/image/get')) ?>"
                    }
                }
            }
        }
    }
</script>
