<?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\Fields $fields */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Permissions $permissions */
/** @var \WriteTextAI\WriteTextAI\ViewModel\GenerateSettings $generateSettings */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Premium $premium */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Settings $settings */

$tooltip = $block->getTooltip();
$fields = $block->getFields();
$permissions = $block->getPermissions();
$customOpenGraph = $fields->getCustomOpenGraph();
$generateSettings = $block->getGenerateSettings();
$premium = $block->getPremium();
$settings = $block->getSettings();
$aiModels = $block->getAiModels();

$defaultTones = $generateSettings->getDefaultTones();
$defaultStyle = $generateSettings->getDefaultStyle();
$defaultAudiences = $generateSettings->getDefaultAudiences();

$selectAllFields = [
    'page_title',
    'page_description',
    'product_description',
    'short_product_description'
];
if ($customOpenGraph) {
    $selectAllFields[] = 'open_graph';
}
$fieldsCount = count($selectAllFields);
?>

<div class="wtai-toolbar wtai-wtai-toolbar" data-bind="scope: 'wtaiToolbar'">
    <div class="wtai-top">
        <div class="wtai-step" data-bind="hidden: guideSteps">
            <span><?= $block->escapeHtml(__('Step 3')) ?></span>
        </div>
        <div class="wtai-col-left" data-bind="css: { 'wtai-guide-steps': guideSteps }">
            <div class="wtai-step wtai-mobile-hidden" data-bind="hidden: guideSteps">
                <span><?= $block->escapeHtml(__('Step 3')) ?></span>
            </div>
            <!-- <div class="wtai-use-ai-field-wrapper" <?php if (!$aiModels->hasAiModels()): ?>
                title="<?= $block->escapeHtmlAttr($tooltip->getNoAiModelAssignedTooltip()) ?>"
            <?php endif; ?>>
                <?= $block->getChildBlock('wtai.pro.badge.toolbar')->toHtml() ?>
                <div class="wtai-field">
                    <input type="checkbox"
                        class="admin__control-checkbox"
                        name="use_ai_model"
                        id="wtaiUseAiModel"
                        data-bind="
                            checked: useAiModel,
                            disable: !hasProAccess() || <?= $aiModels->hasAiModels() ? 'false' : 'true' ?>
                        "
                    />
                    <label for="wtaiUseAiModel" class="admin__field-label">
                        <?= $block->escapeHtml(__('Use trained AI model')) ?>
                    </label>
                </div>
                <div class="wtai-field">
                    <div class="admin__field-control">
                        <select name="wtai-select-ai-model" id="wtai-select-ai-model"
                            class="admin__control-select wtai-select-ai-model"
                            data-bind="
                                value: selectedAiModel,
                                disable:
                                    !hasProAccess() ||
                                    !useAiModel() ||
                                    <?= $aiModels->hasAiModels() ? 'false' : 'true' ?>
                            ">
                            <?php foreach ($aiModels->getAiModels() as $model): ?>
                                <option value="<?= $block->escapeHtmlAttr($model['id']) ?>">
                                    <?= $block->escapeHtml($model['name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </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.ai.model') ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wtai-or-wrapper">
                <span><?= $block->escapeHtml(__('or')) ?></span>
            </div> -->
            <div class="wtai-field wtai-dropdown-field">
                <label class="admin__field-label wtai-strong">
                    <?= $block->escapeHtml(__('Tones & Style')) ?>
                </label>
                <div class="wtai-custom-action-select-wrap" data-bind="
                    attr: { title: isTrainedModelEnabled()
                        ? '<?= $block->escapeJs(__('Disabled when using trained AI model')) ?>' : '' }
                ">
                    <button type="button"
                        class="wtai-custom-action-select"
                        data-role="title"
                        data-bind="disable: isTrainedModelEnabled()"
                    >
                        <span data-bind="text: getTonesStylesSelected, visible: !useAiModel()">
                            <?= $block->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                        </span>
                        <span data-bind="visible: useAiModel()">
                            <?= $block->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                        </span>
                    </button>
                    <div class="admin__action-dropdown-menu" data-role="content">
                        <div class="wtai-fieldset wtai-tones-and-styles">
                            <div class="wtai-tones">
                                <label class="admin__field-label wtai-strong">
                                    <?= $block->escapeHtml(__('Tones')) ?>
                                </label>
                                <div class="wtai-field">
                                    <input type="checkbox"
                                        class="admin__control-checkbox"
                                        id="wtaiAllTones"
                                        data-bind="
                                            checked: selectAllTonesValue,
                                            event: {change: selectAllTones}
                                        "
                                        <?= $permissions->isToneStyleAllowed() ? '' : 'disabled' ?>
                                    />
                                    <label class="admin__field-label wtai-strong" for="wtaiAllTones">
                                        <?= $block->escapeHtml(__('Select all')) ?>
                                    </label>
                                </div>
                                <!-- ko foreach: tones -->
                                <div class="wtai-field" data-bind="attr: {
                                    title: $parent.getToolTipCombinationDisallowed($data.id, 'Tone')
                                }">
                                    <input type="checkbox"
                                        class="admin__control-checkbox"
                                        name="tones[]"
                                        data-bind="
                                            checked: $parent.tonesSelected,
                                            value: $data.id,
                                            attr: { id: 'tone-' + $data.id},
                                            disable: $parent.isCombinationDisallowed($data.id, 'Tone'),
                                            css: { 'wtai-disabled': $parent.isCombinationDisallowed($data.id, 'Tone') },
                                            event: { change: $parent.saveTonesAndStyles }
                                        "/>
                                    <label class="wtai-label admin__field-label" data-bind="
                                        text: $data.name,
                                        attr: { for: 'tone-' + $data.id},
                                        css: { 'wtai-disabled': $parent.isCombinationDisallowed($data.id, 'Tone') }
                                    "></label>
                                </div>
                                <!-- /ko -->
                                <div class="wtai-field">
                                    <input type="checkbox"
                                        class="admin__control-checkbox"
                                        value="custom"
                                        name="tones[]"
                                        id="wtaiCustomTone"
                                        data-bind="
                                            checked: tonesSelected,
                                            disable: !editToneStyleAllowed,
                                            attr: { maxlength: rules.maxCustomToneLength },
                                            event: { change: saveTonesAndStyles },
                                            css: { 'wtai-disabled': !editToneStyleAllowed }
                                        "
                                    />
                                    <label class="admin__field-label" for="wtaiCustomTone"
                                        data-bind="css: { 'wtai-disabled': !editToneStyleAllowed }">
                                        <?= $block->escapeHtml(__('Custom')) ?>
                                    </label>
                                    <!-- <?= $block->getChildBlock('wtai.pro.badge.toolbar')->toHtml() ?> -->
                                </div>
                                <div class="wtai-field admin__field-control wtai-custom">
                                    <input type="text"
                                        name="custom-tone"
                                        class="admin__control-text"
                                        placeholder="<?= $block->escapeHtmlAttr(__('Write your specific tone...')) ?>"
                                        data-bind="
                                            textInput: customTone,
                                            attr: { maxlength: rules.maxCustomToneLength },
                                            disable: !editToneStyleAllowed,
                                            event: { input: handleCustomToneStyle },
                                            css: { 'wtai-disabled': !editToneStyleAllowed }
                                        "
                                    />
                                    <p class="wtai-text-length" data-bind="text: getCustomToneLength()"></p>
                                </div>
                            </div>
                            <span class="wtai-separator">&nbsp;</span>
                            <div class="wtai-styles">
                                <label class="admin__field-label wtai-strong">
                                    <?= $block->escapeHtml(__('Style')) ?>
                                </label>
                                <!-- ko foreach: styles -->
                                <div class="wtai-field" data-bind="attr: {
                                    title: $parent.getToolTipCombinationDisallowed($data.id, 'Style')
                                }">
                                    <input type="radio"
                                        class="admin__control-radio"
                                        name="styles"
                                        data-bind="
                                            checked: $parent.stylesSelected,
                                            value: $data.id,
                                            attr: { id: 'style-' + $data.id},
                                            disable: $parent.isCombinationDisallowed($data.id, 'Style'),
                                            css: { 'wtai-disabled': $parent.isCombinationDisallowed(
                                                $data.id,
                                                'Style'
                                            ) },
                                            event: { change: $parent.saveTonesAndStyles }
                                        "/>
                                    <label class="wtai-label admin__field-label" data-bind="
                                        text: $data.name,
                                        attr: { for: 'style-' + $data.id},
                                        css: { 'wtai-disabled': $parent.isCombinationDisallowed($data.id, 'Style') }
                                    ">
                                    </label>
                                </div>
                                <!-- /ko -->

                                <div class="wtai-field">
                                    <input type="radio"
                                        class="admin__control-radio"
                                        value="custom"
                                        name="styles"
                                        id="wtaiCustomStyle"
                                        data-bind="
                                            checked: stylesSelected,
                                            disable: !editToneStyleAllowed,
                                            event: { change: saveTonesAndStyles },
                                            css: { 'wtai-disabled': !editToneStyleAllowed }
                                        "
                                    />
                                    <label class="wtai-label admin__field-label" for="wtaiCustomStyle" 
                                        data-bind="css: { 'wtai-disabled': !editToneStyleAllowed }" >
                                        <?= $block->escapeHtml(__('Custom')) ?>
                                    </label>
                                    <!-- <?= $block->getChildBlock('wtai.pro.badge.toolbar')->toHtml() ?> -->
                                </div>
                                <div class="wtai-field admin__field-control wtai-custom">
                                    <input type="text"
                                        name="custom-style"
                                        class="admin__control-text"
                                        placeholder="<?= $block->escapeHtmlAttr(
                                            __('Write your specific style...')
                                        ) ?>"
                                        data-bind="
                                            textInput: customStyle,
                                            attr: { maxlength: rules.maxCustomStyleLength },
                                            disable: !editToneStyleAllowed,
                                            event: { input: handleCustomToneStyle },
                                            css: { 'wtai-disabled': !editToneStyleAllowed }
                                        "
                                    />
                                    <p class="wtai-text-length" data-bind="text: getCustomStyleLength()"></p>
                                </div>
                            </div>
                        </div>
                        <div class="wtai-actions">
                            <button type="button"
                                class="action-tertiary"
                                data-bind="click: function() {reset('tones')}">
                                <?= $block->escapeHtml(__('Reset')) ?>
                            </button>
                            <div class="wtai-field" data-bind="visible: formalLanguageSupport().includes(language())">
                                <input type="checkbox"
                                    class="admin__control-checkbox"
                                    name="highlight-pronouns"
                                    id="wtaiHighlightPronounsChecked"
                                    data-bind="
                                        checked: highlightPronouns,
                                        visible: enableHighlightPronouns
                                    "/>
                                <label for="wtaiHighlightPronounsChecked" class="admin__field-label" data-bind="
                                    visible: enableHighlightPronouns
                                ">
                                    <?= $block->escapeHtml(__('Highlight potentially incorrect pronouns')) ?>
                                </label>
                                <input type="checkbox"
                                    class="admin__control-checkbox"
                                    name="highlight-pronouns"
                                    id="wtaiHighlightPronouns"
                                    disabled
                                    data-bind="
                                        hidden: enableHighlightPronouns,
                                    "/>
                                <label for="wtaiHighlightPronouns" class="admin__field-label" data-bind="
                                    hidden: enableHighlightPronouns,
                                    
                                ">
                                    <?= $block->escapeHtml(__('Highlight potentially incorrect pronouns')) ?>
                                </label>
                                <span class="tooltip-toggle"></span>
                                <span class="tooltip-content" data-bind="hidden: enableHighlightPronouns">
                                    <?= /* @noEscape */ __('"Highlight potentially incorrect pronouns"'
                                        . ' is only available when "Formal" tone is selected.') ?>
                                </span>
                            </div>
                        </div>
                    </div>
                </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.tones.and.styles') ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wtai-field wtai-dropdown-field">
                <label class="admin__field-label wtai-strong">
                    <?= $block->escapeHtml(__('Audience')) ?>
                </label>
                <div class="wtai-custom-action-select-wrap wtai-audience" data-bind="
                    attr: { title: isTrainedModelEnabled()
                        ? '<?= $block->escapeJs(__('Disabled when using trained AI model')) ?>' : '' }
                ">
                    <button class="wtai-custom-action-select" data-role="title" data-bind="
                        disable: isTrainedModelEnabled()
                    ">
                        <span data-bind="text: getAudienceSelected, visible: !useAiModel()">
                            <?= $block->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                        </span>
                        <span data-bind="visible: useAiModel()">
                            <?= $block->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                        </span>
                    </button>
                    <div class="admin__action-dropdown-menu" data-role="content">
                        <div class="wtai-fieldset wtai-audience">
                            <div class="wtai-header">
                                <label class="admin__field-label wtai-strong">
                                    <?= $block->escapeHtml(__('Audience')) ?>
                                </label>
                                <button type="button" class="action-tertiary"
                                        data-bind="click: function() { reset('audience') },
                                        disable: !isGenerateAllowed">
                                    <?= $block->escapeHtml(__('Reset')) ?>
                                </button>
                            </div>
                            <div class="wtai-field">
                                <input type="checkbox" class="admin__control-checkbox" id="wtaiAllAudience" data-bind="
                                    checked: selectAllAudienceValue,
                                    event: { change: selectAllAudience },
                                    disable: !isGenerateAllowed
                                "/>
                                <label class="admin__field-label wtai-strong" for="wtaiAllAudience"
                                    data-bind="css: { 'wtai-disabled': !isGenerateAllowed }">
                                    <?= $block->escapeHtml(__('Select all')) ?>
                                </label>
                            </div>
                            <!-- ko foreach: audience -->
                            <div class="wtai-field">
                                <input type="checkbox" class="admin__control-checkbox" name="audience[]" data-bind="
                                    checked: $parent.audienceSelected,
                                    value: $data.id,
                                    attr: { id: 'audience-' + $data.id },
                                    disable: $parent.isCombinationDisallowed($data.id, 'Audience') ||
                                        !$parent.isGenerateAllowed,
                                    css: { 'wtai-disabled': $parent.isCombinationDisallowed($data.id, 'Audience') ||
                                        !$parent.isGenerateAllowed }
                                "/>
                                <label class="wtai-label admin__field-label" data-bind="
                                    text: $data.name,
                                    attr: { for: 'audience-' + $data.id },
                                    css: { 'wtai-disabled': $parent.isCombinationDisallowed($data.id, 'Audience') ||
                                        !$parent.isGenerateAllowed }
                                "></label>
                            </div>
                            <!-- /ko -->
                        </div>
                        <div class="wtai-fieldset wtai-suggested">
                            <div class="wtai-field">
                                <input type="text"
                                    class="admin__control-text"
                                    placeholder="<?= $block->escapeHtmlAttr(
                                        __('Write your specific target market here')
                                    ) ?>"
                                    data-bind="
                                        event: { input: handleInputAudience },
                                        textInput: selectedAudience,
                                        attr: { maxlength: rules.maxCustomAudienceLength },
                                        disable: !isGenerateAllowed
                                    "
                                >
                                <!-- <?= $block->getChildBlock('wtai.pro.badge.toolbar')->toHtml() ?> -->
                                <p class="wtai-text-length" data-bind="text: getCustomAudienceLength()"></p>
                            </div>
                            <div class="wtai-header">
                                <label class="admin__field-label wtai-strong">
                                    <?= $block->escapeHtml(__('Target market (optional)')) ?>
                                </label>
                                <!-- <?= $block->getChildBlock('wtai.pro.badge.toolbar')->toHtml() ?> -->
                                <button type="button"
                                    class="action-tertiary"
                                    data-bind="
                                        click: regenerateAudience,
                                        disable: !isGenerateAllowed
                                    "
                                >
                                    <?= $block->escapeHtml(__('Regenerate')) ?>
                                </button>
                            </div>
                            <ul class="wtai-suggestions" data-bind="
                                foreach: suggestedAudience
                            ">
                                <li data-bind="
                                    click: function () { $parent.selectAudience($data) },
                                    text: $data,
                                    css: { 'wtai-disabled': !$parent.isGenerateAllowed }
                                "></li>
                            </ul>
                            <div class="wtai-audience-loading-mask"></div>
                        </div>
                    </div>
                </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.audience') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wtai-bottom">
        <div class="wtai-left">
            <div class="wtai-field">
                <input type="checkbox"
                    class="admin__control-checkbox"
                    name="select_all"
                    id="wtaiSelectAll"
                    data-bind="
                        checked: selectedFieldsCount,
                        click: processClick
                    "/>
                <label for="wtaiSelectAll" class="admin__field-label">
                    <?= $block->escapeHtml(__('Select all')) ?>
                </label>
            </div>
            <span class="wtai-separator"></span>
            <div class="wtai-field">
                <label class="admin__field-label wtai-toggle-accordion">
                    <?= $block->escapeHtml(__('Collapse/Expand all')) ?>
                </label>
            </div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiToolbar": {
                        "component": "WriteTextAI_WriteTextAI/js/edit/toolbar",
                        "collapsibleSelector": ".wtai-wtai-toolbar .wtai-custom-action-select-wrap",
                        "toggleSelectAllSelector": ".wtai-wtai-toolbar input[name=select_all]",
                        "targetCheckboxSelector":
                            ".wtai-edit-modal-wrapper .wtai-fieldset.wtai-text-editor input[type=checkbox]",
                        "accordionTargetSelector": ".wtai-edit-modal-wrapper .wtai-fieldset.wtai-text-editor",
                        "accordionToggleSelector": ".wtai-wtai-toolbar .wtai-toggle-accordion",
                        "textfieldsCount": <?= /* @noEscape */ $fieldsCount ?>,
                        "customOpenGraph": "<?= /* @noEscape */ $customOpenGraph ?>",
                        "editToneStyleAllowed":
                            <?= /* @noEscape */ $permissions->isToneStyleAllowed() ? 'true' : 'false' ?>,
                        "defaultTones": <?= /* @noEscape */ json_encode($defaultTones) ?>,
                        "defaultStyle": <?= /* @noEscape */ json_encode($defaultStyle) ?>,
                        "defaultAudiences": <?= /* @noEscape */ json_encode($defaultAudiences) ?>,
                        "highlightPronounsUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/pronouns_highlighted')
                        ) ?>",
                        "audienceGetUrl": "<?= $block->escapeJs($block->getUrl('wtai/edit/audience_get')) ?>",
                        "audienceSelectUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/audience_select')
                        ) ?>",
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "hasAiModels": <?= /* @noEscape */ $aiModels->hasAiModels() ? 'true' : 'false' ?>,
                        "saveUrl": "<?= $block->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "isGenerateAllowed":
                            <?= /* @noEscape */ $permissions->isGenerateAllowed() ? 'true' : 'false' ?>
                    }
                }
            }
        }
    }
</script>
