<?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();
$permissions = $block->getPermissions();
$generateSettings = $block->getGenerateSettings();
$premium = $block->getPremium();
$settings = $block->getSettings();
$defaultTones = $generateSettings->getDefaultTones();
$defaultStyle = $generateSettings->getDefaultStyle();
$defaultAudiences = $generateSettings->getDefaultAudiences();
?>

<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 4')) ?></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 4')) ?></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">
                    <button type="button"
                            class="wtai-custom-action-select"
                            data-role="title">
                        <span data-bind="text: getTonesStylesSelected">0 selected</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,
                                            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">
                    <button class="wtai-custom-action-select"
                            data-role="title">
                        <span data-bind="text: getAudienceSelected">0 selected</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') }">
                                    <?= $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 }
                                "/>
                                <label class="admin__field-label wtai-strong" for="wtaiAllAudience">
                                    <?= $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')
                                "/>
                                <label class="wtai-label admin__field-label" data-bind="
                                    text: $data.name,
                                    attr: { for: 'audience-' + $data.id }
                                "></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 }
                                    "
                                >
                                <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>
                                <button type="button"
                                    class="action-tertiary"
                                    data-bind="
                                        click: getAudience
                                    "
                                >
                                    <?= $block->escapeHtml(__('Regenerate')) ?>
                                </button>
                            </div>
                            <ul class="wtai-suggestions" data-bind="
                                foreach: suggestedAudience
                            ">
                                <li data-bind="
                                    click: function () { $parent.selectAudience($data) },
                                    text: $data
                                "></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.category') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wtai-col-right">
            <?php if ($permissions->isGenerateAllowed()): ?>
                <div class="wtai-right">
                    <div class="wtai-step" data-bind="hidden: guideSteps">
                        <?= $block->escapeHtml(__('Step 5')) ?>
                    </div>
                    <div class="wtai-field wtai-action">
                        <button type="button"
                            class="action-default scalable action-secondary"
                            data-bind="
                                enable: canGenerate,
                                click: function () { generate(false) },
                                visible: submitAction() === 'generate'
                            "
                        >
                            <span><?= $block->escapeHtml(__('Generate selected')) ?></span>
                        </button>
                    </div>
                    <div class="wtai-edit-loading-mask"></div>
                </div>
            <?php endif; ?>
        </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">
                    <?= $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/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":
                            "<?= $block->escapeJs($block->getUrl('wtai/categories/edit_audience_get')) ?>",
                        "audienceSelectUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/categories/edit_audience_select')
                        ) ?>",
                        "accordionToggleSelector": ".wtai-wtai-toolbar .wtai-toggle-accordion",
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "editToneStyleAllowed":
                            <?= /* @noEscape */ $permissions->isToneStyleAllowed() ? 'true' : 'false' ?>,
                        "generateUrl":
                            "<?= $block->escapeJs($block->getUrl('wtai/categories/edit_generate')) ?>",
                        "saveUrl": "<?= $block->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "uploadUrl": "<?= $block->escapeJs($block->getUrl('wtai/categories/image_upload')) ?>",
                        "highlightPronounsUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/pronouns_highlighted')
                        ) ?>",
                        "getGeneratedUrl":
                            "<?= $block->escapeJs($block->getUrl('wtai/categories/edit_textfields_get')) ?>"
                    }
                }
            }
        }
    }
</script>
