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

<?php
$diffculties = [
    [
        'value' => 'Low',
        'label' => __('LOW')
    ],
    [
        'value' => 'LowMid',
        'label' => __('LOW MID')
    ],
    [
        'value' => 'Mid',
        'label' => __('MID')
    ],
    [
        'value' => 'MidHigh',
        'label' => __('MID HIGH')
    ],
    [
        'value' => 'High',
        'label' => __('HIGH')
    ]
];
$difficultiesValues = array_column($diffculties, 'value');
?>

<div class="wtai-keyword-pool" data-bind="scope: 'wtaiKeywordPool'">
    <div class="wtai-keyword-pool-header-wrapper">
        <div class="wtai-keyword-pool-header">
            <div class="wtai-keyword-pool-title">
                <?= $escaper->escapeHtml(__('Keyword Pool')) ?>
            </div>
            <div class="wtai-keyword-pool-subtitle" data-bind="hidden: isHistoryMode">
                <?= $escaper->escapeHtml(
                    __('Drag and drop keywords in your desired pipeline. Keywords are sorted by search'
                       . ' volume, with seed keywords listed first.')
                ) ?>
            </div>
        </div>
        <div class="wtai-keyword-pool-actions"
            data-bind="hidden: isHistoryMode">
            <div class="wtai-action-label">
                <?= $escaper->escapeHtml(__('Show')) ?>
            </div>
            <div class="wtai-difficulty-filter">
                <button class="wtai-pool-action-btn wtai-difficulty-btn">
                    <span class="wtai-difficulty-btn-text" data-bind="text: filterDifficultyLabel">
                    </span>
                </button>
                <div class="wtai-field-columns"
                    id="wtaiDifficultyFilterDialog"
                    data-role="dropdownDialog"
                    data-bind="foreach: difficulties"
                >
                    <div class="wtai-field-column">
                        <input type="checkbox"
                            class="admin__control-checkbox"
                            name="product_texts[]"
                            data-bind="
                                checked: $parent.selectedDifficultyFilter,
                                attr: {
                                    id: 'difficulty-' + $data.value,
                                    value: $data.value
                                }
                            "
                        />
                        <label data-bind="attr: {
                            for: 'difficulty-' + $data.value
                        }">
                            <span data-bind="text: $data.label"></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="wtai-search-volume-filter">
                <button class="wtai-pool-action-btn wtai-volume-btn">
                    <span class="wtai-volume-btn-text" data-bind="text: filterVolumeLabel">
                    </span>
                </button>
                <div class="wtai-field-columns" id="wtaiVolumeFilterDialog" data-role="dropdownDialog">
                    <div class="wtai-field-column">
                        <input type="radio"
                            class="admin__control-radio"
                            value="{&quot;min&quot;: 0, &quot;max&quot;: null}"
                            name="search_volume_filter"
                            id="wtaiVolumeRange0"
                            data-bind="checked: selectedVolumeFilter"
                        />
                        <label for="wtaiVolumeRange0"><?= $escaper->escapeHtml(__('All')) ?></label>
                    </div>
                    <div class="wtai-field-column">
                        <input type="radio"
                            class="admin__control-radio"
                            value="{&quot;min&quot;: 0, &quot;max&quot;: 10000}"
                            name="search_volume_filter"
                            id="wtaiVolumeRange1"
                            data-bind="checked: selectedVolumeFilter"
                        />
                        <label for="wtaiVolumeRange1"><?= $escaper->escapeHtml(__('0 - 10000')) ?></label>
                    </div>
                    <div class="wtai-field-column">
                        <input type="radio"
                            class="admin__control-radio"
                            value="{&quot;min&quot;: 10001, &quot;max&quot;: 50000}"
                            name="search_volume_filter"
                            id="wtaiVolumeRange2"
                            data-bind="checked: selectedVolumeFilter"
                        />
                        <label for="wtaiVolumeRange2"><?= $escaper->escapeHtml(__('10001 - 50000')) ?></label>
                    </div>
                    <div class="wtai-field-column">
                        <input type="radio"
                            class="admin__control-radio"
                            value="{&quot;min&quot;: 50001, &quot;max&quot;: null}"
                            name="search_volume_filter"
                            id="wtaiVolumeRange3"
                            data-bind="checked: selectedVolumeFilter"
                        />
                        <label for="wtaiVolumeRange3"><?= $escaper->escapeHtml(__('50001 and over')) ?></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wtai-keyword-pool-container wtai-no-data" data-bind="hidden: visibleKeywords().length > 0">
        <?= $escaper->escapeHtml(__('No keywords found')) ?>
    </div>
    <div class="wtai-keyword-pool-container wtai-with-data" 
        data-bind="visible: visibleKeywords().length > 0"
    >
        <ul id="wtaiKeywordPoolList" data-bind="
            foreach: visibleKeywords,
            afterRender: afterRender
        ">
            <li data-bind="
                css: { 
                    'wtai-selected': $data.isSeed,
                    'wtai-selected-with-data': $data.isSeed
                },
                aboveTheCenter: {
                    visibleKeywords: $parent.visibleKeywords
                }
            ">
                <div class="wtai-not-hovered">
                    <span class="wtai-star-badge" data-bind="visible: $data.position > 0"></span>
                    <span class="wtai-keyword-text" data-bind="html: $data.keyword"></span>
                </div>
                <div class="wtai-hovered">
                    <div class="wtai-keyword" data-bind="html: $data.keyword"></div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $escaper->escapeHtml(__("Difficulty")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="
                            text: $parent.getFormattedDifficulty($data.difficulty)
                        "></span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $escaper->escapeHtml(__("Search volume")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $data.searchVolume"></span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $escaper->escapeHtml(__("Traffic potential")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $data.trafficPotential"></span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $escaper->escapeHtml(__("Intent")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $data.intentDisplay"></span>
                    </div>
                </div>
            </li>
            <!-- ko if: $index() === ($parent.visibleKeywords().length - 1) -->
            <span>
                <button class="wtai-link-style-button wtai-load-more"
                    data-bind="click: $parent.loadMore,
                        visible: $parent.visibleKeywords().length < $parent.keywordPoolItems().length">
                    <?= $escaper->escapeHtml(__('Load more...')) ?>
                </button>
            </span>
            <!-- /ko -->
        </ul>
    
        <span class="tooltip-content">
            <?= $escaper->escapeHtml(__('You have reached the maximum limit of 6 pipelines.'
                . ' To drag a keyword from the pool, set an existing pipeline to edit mode.')) ?>
        </span>
    </div>
    
    <div class="wtai-refresh-mask" data-bind="visible: refreshingData"></div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiKeywordPool": {
                        "component": "<?= $escaper->escapeJs($block->getJsComponent()) ?>",
                        "entityType": "<?= $escaper->escapeJs($block->getEntityType()) ?>",
                        "difficulties": <?= /* @noEscape */ json_encode($diffculties) ?>,
                        "selectedDifficultyFilter": <?= /* @noEscape */ json_encode($difficultiesValues) ?>
                    }
                }
            }
        }
    }
</script>