<?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 */
/** @var \WriteTextAI\WriteTextAI\ViewModel\AiModels $aiModels */

$tooltip = $block->getTooltip();
$permissions = $block->getPermissions();
$generateSettings = $block->getGenerateSettings();
$premium = $block->getPremium();
$settings = $block->getSettings();
$aiModels = $block->getAiModels();
$defaultTones = $generateSettings->getDefaultTones();
$defaultStyle = $generateSettings->getDefaultStyle();
$defaultAudiences = $generateSettings->getDefaultAudiences();
$noAiModelsAssigned = !$aiModels->hasAiModels();
?>

<div class="wtai-toolbar wtai-wtai-toolbar" data-bind="scope: 'wtaiToolbar'">
    <div class="wtai-top">
        <div class="wtai-step" data-bind="
            hidden: guideSteps,
            css: {
                'wtai-brandvoice-view': isViewerUser,
                'wtai-brandvoice-disabled': isProcessRunning
            }
        ">
            <span><?= $escaper->escapeHtml(__('Step 4')) ?></span>
        </div>
        <div class="wtai-col-left" data-bind="css: {
            'wtai-guide-steps': guideSteps,
            'wtai-brandvoice-view': isViewerUser,
            'wtai-brandvoice-disabled': isProcessRunning
        }">
            <div class="wtai-step wtai-mobile-hidden" data-bind="
                hidden: guideSteps,
                css: {
                    'wtai-brandvoice-view': isViewerUser,
                    'wtai-brandvoice-disabled': isProcessRunning
                }
            ">
                <span><?= $escaper->escapeHtml(__('Step 4')) ?></span>
            </div>
            <div class="wtai-use-ai-field-wrapper"
                data-bind="css: { 'wtai-use-ai-field-wrapper_checked': useAiModel }"
                <?= $noAiModelsAssigned ? ' data-wtai-no-ai-model="1"' : '' ?>
            >
                <div class="wtai-field wtai-dropdown-field">
                    <?php if ($noAiModelsAssigned): ?>
                        <div class="admin__field-tooltip wtai-small wtai-no-ai-model-tooltip">
                            <div class="admin__field-tooltip-content wtai-bottom-left wtai-radio-tooltip"
                                data-target="dropdown">
                                <div class="wtai-content-wrapper">
                                    <?= /* @noEscape */ $tooltip->getNoAiModelAssignedTooltip() ?>
                                </div>
                                <div class="wtai-educational-tooltip-arrow wtai-educational-tooltip-arrow-top"></div>
                            </div>
                        </div>
                    <?php endif; ?>
                    <input type="radio"
                        class="admin__control-radio"
                        name="use_ai_model"
                        id="wtaiUseAiModelYes"
                        <?= $noAiModelsAssigned ? ' data-wtai-no-ai-model-target="1"' : '' ?>
                        data-bind="
                            checked: genToneStyleMode,
                            checkedValue: 'ai_model',
                            disable: <?= $aiModels->hasAiModels() ? 'false' : 'true' ?>
                        "/>
                    <label for="wtaiUseAiModelYes" class="admin__field-label"
                        <?= $noAiModelsAssigned ? ' data-wtai-no-ai-model-target="1"' : '' ?>
                    >
                        <?= $escaper->escapeHtml(__('Brand voice')) ?>
                    </label>
                </div>
                <div class="wtai-field wtai-ai-model-select-wrapper">
                    <div class="admin__field-control wtai-ai-model-select-control"
                        <?= $noAiModelsAssigned ? ' data-wtai-no-ai-model-target="1"' : '' ?>
                    >
                        <?php if ($noAiModelsAssigned): ?>
                            <div class="admin__field-tooltip wtai-small wtai-no-ai-model-tooltip">
                                <div class="admin__field-tooltip-content wtai-bottom-left " data-target="dropdown">
                                    <div class="wtai-content-wrapper">
                                        <?= /* @noEscape */ $tooltip->getNoAiModelAssignedTooltip() ?>
                                    </div>
                                    <div class="wtai-educational-tooltip-arrow
                                        wtai-educational-tooltip-arrow-top"></div>
                                </div>
                            </div>
                        <?php endif; ?>
                        <?php if ($noAiModelsAssigned): ?>
                            <div class="wtai-no-ai-model-select-overlay" data-wtai-no-ai-model-target="1"></div>
                        <?php endif; ?>
                        <select name="wtai-select-ai-model" id="wtai-select-ai-model"
                            class="admin__control-select wtai-select-ai-model pro-field-control"
                            data-bind="
                                value: selectedAiModel,
                                disable:<?= $aiModels->hasAiModels() ? 'false' : 'true' ?>,
                                event: { focus: function(){ genToneStyleMode('ai_model'); } }
                            ">
                        <?php foreach ($aiModels->getAiModels() as $model): ?>
                            <?php
                                $modelName = (string)($model['name'] ?? '');
                                $maxLabelLength = 30;
                                $modelLabel = $modelName;
                            if (function_exists('mb_strlen') && function_exists('mb_substr')) {
                                if (mb_strlen($modelLabel, 'UTF-8') > $maxLabelLength) {
                                    $modelLabel = mb_substr($modelLabel, 0, $maxLabelLength - 1, 'UTF-8') . '…';
                                }
                            } else {
                                if (strlen($modelLabel) > $maxLabelLength) {
                                    $modelLabel = substr($modelLabel, 0, $maxLabelLength - 3) . '...';
                                }
                            }
                            ?>
                            <option
                                value="<?= $escaper->escapeHtmlAttr($model['id'] ?? '') ?>"
                                title="<?= $escaper->escapeHtmlAttr($modelName) ?>"
                            >
                                <?= $escaper->escapeHtml($modelLabel) ?>
                            </option>
                        <?php endforeach; ?>
                        </select>
                        <?php if ($noAiModelsAssigned): ?>
                            <span class="wtai-no-ai-model-select-overlay" data-wtai-no-ai-model-target="1"></span>
                        <?php endif; ?>
                    </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 wtai-lower-right wtai-ai-model-tooltip-wrapper"
                        data-target="dropdown">
                        <div class="wtai-content-wrapper">
                            <?= /* @noEscape */ $tooltip->getTooltip('wtai.ai.model') ?>
                        </div>
                    </div>
                </div>
                </div>
               
            </div>
            <div class="wtai-or-wrapper">
                <span><?= $escaper->escapeHtml(__('or')) ?></span>
            </div>
            <div class="wtai-dropdown-fields-wrapper wtai-dropdown-fields-wrapper-manual-mode " data-bind="
                css: { 
                    'wtai-dropdown-fields-wrapper_checked': !useAiModel()
                }
            ">
            <div class="wtai-field wtai-dropdown-field wtai-tooltip-manual-layout">
                    <input type="radio"
                            class="admin__control-radio"
                            name="use_ai_model"
                            id="wtaiUseAiModelNo"
                            data-bind="
                                checked: genToneStyleMode,
                                checkedValue: 'manual'
                            "/>
                    <label for="wtaiUseAiModelNo" class="admin__field-label wtai-strong">
                        <?= $escaper->escapeHtml(__('Tones & Style')) ?>
                    </label>
                    <div class="wtai-custom-action-select-wrap" data-bind="
                        attr: { title: isTrainedModelEnabled()
                            ? '<?= $escaper->escapeJs(__('Disabled when using brand voice')) ?>' : '' }
                    ">
                        <button type="button"
                            class="wtai-custom-action-select"
                            data-role="title"
                            data-bind="event: { focus: function(){ genToneStyleMode('manual'); } }">
                            <span data-bind="text: getTonesStylesSelected, visible: !useAiModel()">
                                <?= $escaper->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                            </span>
                            <span data-bind="visible: useAiModel()">
                                <?= $escaper->escapeHtml(__('Select...')) ?>
                            </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">
                                        <?= $escaper->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">
                                            <?= $escaper->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 }
                                        ">
                                            <?= $escaper->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="<?= $escaper->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">
                                        <?= $escaper->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 admin__field-control wtai-custom">
                                        <input type="text"
                                            name="custom-style"
                                            class="admin__control-text"
                                            placeholder="<?= $escaper->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')}">
                                    <?= $escaper->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
                                    ">
                                        <?= $escaper->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
                                    ">
                                        <?= $escaper->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>
                <div class="wtai-field wtai-dropdown-field wtai-tooltip-manual-layout">
                    <label class="admin__field-label wtai-strong wtai-audience-label">
                        <?= $escaper->escapeHtml(__('Audience')) ?>
                    </label>
                    <div class="wtai-custom-action-select-wrap wtai-audience" data-bind="
                        attr: { title: isTrainedModelEnabled()
                            ? '<?= $escaper->escapeJs(__('Disabled when using brand voice')) ?>' : '' }
                    ">
                        <button class="wtai-custom-action-select"
                                data-role="title"
                                data-bind="event: { focus: function(){ genToneStyleMode('manual'); } }
                        ">
                            <span data-bind="text: getAudienceSelected, visible: !useAiModel()">
                                <?= $escaper->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                            </span>
                            <span data-bind="visible: useAiModel()">
                                <?= $escaper->escapeHtml(__('Select...')) ?>
                            </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">
                                        <?= $escaper->escapeHtml(__('Audience')) ?>
                                    </label>
                                    <button type="button" class="action-tertiary"
                                            data-bind="click: function() { reset('audience') },
                                                disable: !isGenerateAllowed">
                                        <?= $escaper->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 }">
                                        <?= $escaper->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="<?= $escaper->escapeHtmlAttr(
                                            __('Write your specific target market here')
                                        ) ?>"
                                        data-bind="
                                            event: { input: handleInputAudience },
                                            textInput: selectedAudience,
                                            attr: { maxlength: rules.maxCustomAudienceLength },
                                            disable: !isGenerateAllowed
                                        "
                                    >
                                    <p class="wtai-text-length" data-bind="text: getCustomAudienceLength()"></p>
                                </div>
                                <div class="wtai-header">
                                    <label class="admin__field-label wtai-strong">
                                        <?= $escaper->escapeHtml(__('Target market (optional)')) ?>
                                    </label>
                                    <button type="button"
                                        class="action-tertiary"
                                        data-bind="
                                            click: regenerateAudience,
                                            disable: !isGenerateAllowed
                                        "
                                    >
                                        <?= $escaper->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 wtai-tooltip-manual-wrapper">
                        <a class="admin__field-tooltip-action wtai-tooltip-manual" href="#" data-toggle="dropdown"></a>
                        <div class="admin__field-tooltip-content wtai-upper-right" data-target="dropdown">
                            <div class="wtai-content-wrapper">
                                <?= /* @noEscape */ $tooltip->getTooltip('wtai.audience') ?>
                            </div>
                        </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: allFieldsSelected,
                        click: processClick
                    "
                />
                <label for="wtaiSelectAll" class="admin__field-label">
                    <?= $escaper->escapeHtml(__('Select all')) ?>
                </label>
            </div>
            <span class="wtai-separator"></span>
            <div class="wtai-field">
                <label class="admin__field-label wtai-toggle-accordion">
                    <?= $escaper->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/categories/edit/toolbar",
                        "collapsibleSelector": ".wtai-wtai-toolbar .wtai-custom-action-select-wrap",
                        "toggleSelectAllSelector": ".wtai-wtai-toolbar input[name=select_all]",
                        "defaultTones": <?= /* @noEscape */ json_encode($defaultTones) ?>,
                        "defaultStyle": <?= /* @noEscape */ json_encode($defaultStyle) ?>,
                        "defaultAudiences": <?= /* @noEscape */ json_encode($defaultAudiences) ?>,
                        "accordionTargetSelector": ".wtai-edit-modal-wrapper .wtai-fieldset.wtai-text-editor",
                        "audienceGetUrl":
                            "<?= $escaper->escapeJs($block->getUrl('wtai/categories/edit_audience_get')) ?>",
                        "audienceSelectUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/categories/edit_audience_select')
                        ) ?>",
                        "accordionToggleSelector": ".wtai-wtai-toolbar .wtai-toggle-accordion",
                        "hasAiModels": <?= /* @noEscape */ $aiModels->hasAiModels() ? 'true' : 'false' ?>,
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "editToneStyleAllowed":
                            <?= /* @noEscape */ $permissions->isToneStyleAllowed() ? 'true' : 'false' ?>,
                        "saveUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "highlightPronounsUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/pronouns_highlighted')
                        ) ?>",
                        "isGenerateAllowed":
                            <?= /* @noEscape */ $permissions->isGenerateAllowed() ? 'true' : 'false' ?>
                    }
                }
            }
        }
    }
</script>
