<?php
/**
 * @author Amasty Team
 * @copyright Copyright (c) Amasty (https://www.amasty.com)
 * @package Elastic Search Base for Magento 2
 */
$_htmlId = $block->getHtmlId() ? $block->getHtmlId() : '_' . uniqid();
?>

<div class="design_theme_ua_regexp" id="grid<?= /* @noEscape */ $_htmlId ?>"
     style="position: relative">
    <div class="admin__control-table-wrapper">
        <table class="admin__control-table" id="<?= /* @noEscape */ $block->getElement()->getId() ?>">
            <thead>
            <tr>
                <?php foreach ($block->getColumns() as $columnName => $column): ?>
                    <th><?= /* @noEscape */ $column['label'] ?></th>
                <?php endforeach;?>
            </tr>
            </thead>
            <tbody id="addRow<?= /* @noEscape */ $_htmlId ?>"></tbody>
        </table>
    </div>
    <input type="hidden" name="<?= /* @noEscape */ $block->getElement()->getName() ?>[__empty]" value="" />

    <script>
        require([
            'mage/template',
            'prototype'
        ], function (mageTemplate) {
            // create row creator
            window.arrayRow<?= /* @noEscape */ $_htmlId ?> = {
                // define row prototypeJS template
                template: mageTemplate(
                    '<tr id="<%- _id %>">'
                    <?php foreach ($block->getColumns() as $columnName => $column): ?>
                    + '<td>'
                    + '<?= /* @noEscape */ $block->renderCellTemplate($columnName) ?>'
                    + '<\/td>'
                    <?php endforeach; ?>
                    +'<\/tr>'
                ),

                add: function(rowData, insertAfterId) {
                    // generate default template data
                    var templateValues;

                    // Prepare template values
                    if (rowData) {
                        templateValues = rowData;
                    } else {
                        var d = new Date();
                        templateValues = {
                        <?php foreach ($block->getColumns() as $columnName => $column):?>
                            <?= /* @noEscape */ $columnName ?>: '',
                            'option_extra_attrs': {},
                        <?php endforeach; ?>
                        _id: '_' + d.getTime() + '_' + d.getMilliseconds()
                    };
                    }

                    // Insert new row after specified row or at the bottom
                    if (insertAfterId) {
                        Element.insert($(insertAfterId), {after: this.template(templateValues)});
                    } else {
                        Element.insert(
                            $('addRow<?= /* @noEscape */ $_htmlId ?>'), {bottom: this.template(templateValues)}
                        );
                    }

                    // Fill controls with data
                    if (rowData) {
                        var rowInputElementNames = Object.keys(rowData.column_values);
                        for (var i = 0; i < rowInputElementNames.length; i++) {
                            if ($(rowInputElementNames[i])) {
                                $(rowInputElementNames[i]).setValue(rowData.column_values[rowInputElementNames[i]]);
                            }
                        }
                    }
                }
            }

            // add existing rows
            <?php
            foreach ($block->getArrayRows() as $_rowId => $_row) {
                /* @noEscape */ echo "arrayRow{$_htmlId}.add(" . $_row->toJson() . ");\n";
            }
            ?>

            // Toggle the grid availability, if element is disabled (depending on scope)
            <?php if ($block->getElement()->getDisabled()): ?>
            toggleValueElements({checked: true}, $('grid<?= /* @noEscape */ $_htmlId ?>').parentNode);
            <?php endif;?>

            jQuery('#amasty_elastic_catalog_query_settings .admin__actions-switch-label').click(function (event) {
                if (jQuery(this).hasClass('wildcard')) {
                    jQuery(this).closest('tr').find('.input-spelling').prop('checked', false);
                } else if(jQuery(this).hasClass('spelling')) {
                    jQuery(this).closest('tr').find('.input-wildcard').prop('checked', false);
                }
            });

            function initColumns() {
                if (jQuery('#amasty_elastic_connection_custom_analyzer option:selected').val() !== 'disabled') {
                    jQuery('#amasty_elastic_catalog_query_settings tr td:nth-child(2)').hide();
                    jQuery('#amasty_elastic_catalog_query_settings tr td:nth-child(3)').hide();
                    jQuery('#amasty_elastic_catalog_query_settings tr th:nth-child(2)').hide();
                    jQuery('#amasty_elastic_catalog_query_settings tr th:nth-child(3)').hide();
                } else {
                    jQuery('#amasty_elastic_catalog_query_settings tr td:nth-child(2)').show();
                    jQuery('#amasty_elastic_catalog_query_settings tr td:nth-child(3)').show();
                    jQuery('#amasty_elastic_catalog_query_settings tr th:nth-child(2)').show();
                    jQuery('#amasty_elastic_catalog_query_settings tr th:nth-child(3)').show();
                }
            }
            initColumns();
            jQuery('body').on('change', '#amasty_elastic_connection_custom_analyzer', initColumns.bind(this));
        });
    </script>
</div>
