<?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();
$noAiModelsAssigned = !$aiModels->hasAiModels();

$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, css: { 'wtai-brandvoice-view': isViewerUser, 'wtai-brandvoice-disabled': isProcessRunning}">
            <span><?= $block->escapeHtml(__('Step 3')) ?></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><?= $block->escapeHtml(__('Step 3')) ?></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"' : '' ?>>
                            <?= $block->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"
                            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="<?= $block->escapeHtmlAttr($model['id'] ?? '') ?>" title="<?= $block->escapeHtmlAttr($modelName) ?>">
                                    <?= $block->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-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><?= $block->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">
                        <?= $block->escapeHtml(__('Tones & Style')) ?>
                    </label>
                    <div class="wtai-custom-action-select-wrap" data-bind="
                        css: { 'wtai-look-disabled': isTrainedModelEnabled() }
                    ">
                        <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()">
                                <?= $block->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                            </span>
                            <span data-bind="visible: useAiModel()">
                                <?= $block->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">
                                        <?= $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>
                <div class="wtai-field wtai-dropdown-field wtai-tooltip-manual-layout">
                    <label class="admin__field-label wtai-strong wtai-margin-bottom wtai-audience-label">
                        <?= $block->escapeHtml(__('Audience')) ?>
                    </label>
                    <div class="wtai-custom-action-select-wrap wtai-audience" data-bind="
                        css: { 'wtai-look-disabled': isTrainedModelEnabled() }
                    ">
                        <button class="wtai-custom-action-select" data-role="title" data-bind="
                            event: { focus: function(){ genToneStyleMode('manual'); } }
                        ">
                            <span data-bind="text: getAudienceSelected, visible: !useAiModel()">
                                <?= $block->escapeHtml(sprintf(__('%s selected'), 0)) ?>
                            </span>
                            <span data-bind="visible: useAiModel()">
                                <?= $block->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">
                                        <?= $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 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: 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>
