$(document).ready(function () {
    window.prestashop.component.initComponents([
        'TinyMCEEditor',
        'TranslatableField',
        'TranslatableInput',
    ]);

    function toggleBlockTypeFields() {
        var type = $('#custom_html_block_type').val();

        $('.customhtmlblock-type-html').hide();
        $('.customhtmlblock-type-faq').hide();
        $('.customhtmlblock-type-banner').hide();
        $('.customhtmlblock-type-alert').hide();
        $('.customhtmlblock-type-usp').hide();
        $('.customhtmlblock-type-slider').hide();
        $('.customhtmlblock-type-' + type).show();
    }

    $('#custom_html_block_type').on('change', toggleBlockTypeFields);
    toggleBlockTypeFields();

    function toggleGroupDefaultClassHint() {
        var hint = $('#customhtmlblock-group-default-class-hint');
        var defaultClass = $('#custom_html_block_id_ws_customhtml_group option:selected').data('defaultBlockClass');

        if (defaultClass) {
            hint.text(hint.data('template').replace('%s%', defaultClass)).show();
        } else {
            hint.hide();
        }
    }

    $('#custom_html_block_id_ws_customhtml_group').on('change', toggleGroupDefaultClassHint);
    toggleGroupDefaultClassHint();

    function initRepeater(containerSelector, addButtonSelector, itemClass, removeButtonClass) {
        var container = $(containerSelector);
        var removeLabel = container.data('removeLabel');

        $(addButtonSelector).on('click', function () {
            var index = container.data('index');
            var prototype = container.data('prototype').replace(/__name__/g, index);

            var item = $('<div class="' + itemClass + ' card mb-2"><div class="card-body"></div></div>');
            item.find('.card-body')
                .append(prototype)
                .append(
                    '<button type="button" class="btn btn-outline-danger btn-sm ' + removeButtonClass + '">' +
                    '<i class="material-icons">delete</i> ' + removeLabel + '</button>'
                );

            container.append(item);
            container.data('index', index + 1);
        });

        container.on('click', '.' + removeButtonClass, function () {
            $(this).closest('.' + itemClass).remove();
        });
    }

    initRepeater('#customhtmlblock-faq-items', '#customhtmlblock-add-faq', 'customhtmlblock-faq-item', 'customhtmlblock-remove-faq');
    initRepeater('#customhtmlblock-slide-items', '#customhtmlblock-add-slide', 'customhtmlblock-slide-item', 'customhtmlblock-remove-slide');
});