BX.ready(function () {
 
    BX.namespace("PopupproAdminButton");

    BX.PopupproAdminButton = function(){
        this.init();
    };

    BX.PopupproAdminButton.prototype = {
        init: function () {
            this.c_container = BX("button_window_popup");
            this._events();
        },

        _renderHint: function(id, text)
        {
            new BX.CHint({
                parent: BX(id),
                show_timeout: 10,
                hide_timeout: 200,
                dx: 2,
                preventHide: true,
                min_width: 400,
                hint: text
            });
        },

        _renderColorPicker: function (id, color) {
            BX.bind(document.querySelectorAll(".adm-detail-content-wrap")[0], 'click', BX.delegate(picker, this));
            function picker(e) {

                if (e.target.id == id) {
                    new BX.ColorPicker({
                        bindElement: BX(id),
                        defaultColor: color,
                        onColorSelected: function (item) {
                            BX(id).value = item

                            if (BX(id).parentElement.querySelectorAll(".preview-color")[0]) {
                                BX(id).parentElement.querySelectorAll(".preview-color")[0].style = "background: " + item;
                            }

                        },
                        selectedColor: color,
                        colorPreview: false,
                        popupOptions: {
                            angle: true,
                            autoHide: true,
                            closeByEsc: true,
                            events: {
                                onPopupClose: function () {
                                    managerPopupPro.updatePreview();
                                }
                            }
                        }
                    }).open();
                }
            }
        },

        _getPropsValue: function(name, template)
        {
            return template['props'][name];
        },

        _render: function(type, template){

            $("#button_window_popup").html("");

            let fields = type.props.BUTTON_WINDOW_POPUP;

            for (let fieldName in fields)
            {

                let field = fields[fieldName];
                let disabled = "";

                if(this._getPropsValue("BWP_ACTIVE", template) === "N") {
                    disabled = "_disabled";
                }

                if(field['TYPE'] === "CHECKBOX")
                {
                    let checked = !disabled ? "checked" : "";

                    $("#button_window_popup").append(`
                        <label class="bwp_item _active toggle-active">
                            <span>${field['TITLE_BLOCK']}<span class="skwb24-item-hint" id="hint_${fieldName}">?</span></span>
                            <input type="checkbox" name="${fieldName}" ${checked}>
                        </label>
                    `);
                }

                if(fields[fieldName]['TYPE'] === "SELECT")
                {
                    let options = '';

                    for (let [key, value] of Object.entries(field['LIST'])) {
                        let selected = "";
                        if(key === this._getPropsValue(fieldName, template)){
                            selected = "selected";
                        }
                        options += `<option value="${key}" ${selected}>${value}</option>`
                    }

                    $("#button_window_popup").append(`
                        <label class="bwp_item ${disabled}">
                            <span>${field['TITLE_BLOCK']}<span class="skwb24-item-hint" id="hint_${fieldName}">?</span></span>
                            <select name="${fieldName}">${options}</select>
                        </label>
                    `);
                }

                if(fields[fieldName]['TYPE'] === "COLOR")
                {
                    $("#button_window_popup").append(`
                        <label class="bwp_item ${disabled}">
                            <span>${field['TITLE_BLOCK']}<span class="skwb24-item-hint" id="hint_${fieldName}">?</span></span>
                            <input type="text" id="${fieldName}" name="${fieldName}" value="${this._getPropsValue(fieldName, template)}">
                        </label>
                    `);

                    this._renderColorPicker(fieldName, field['VALUE']);
                }

                if(fields[fieldName]['TYPE'] === "INPUT")
                {
                    $("#button_window_popup").append(`
                        <label class="bwp_item ${disabled}">
                            <span>${field['TITLE_BLOCK']}<span class="skwb24-item-hint" id="hint_${fieldName}">?</span></span>
                            <input type="text" id="${fieldName}" name="${fieldName}" value="${this._getPropsValue(fieldName, template)}">
                        </label>
                    `);
                }

                this._renderHint("hint_" + fieldName, field['HINT']);
            }

        },

        _events: function () {

            let _self = this;

            BX.bindDelegate( this.c_container, "change", {className: "toggle-active"}, function (e) {

                let checkbox = this.querySelector("input");

                for(let item of document.querySelectorAll(".bwp_item")) {
                    if(checkbox.checked) {
                        item.classList.remove("_disabled");
                    }
                    else{
                        item.classList.add("_disabled");
                    }
                }
            });

            BX.addCustomEvent('onTemplatesLoaded', function (AdminTemplate) {
                _self._render(
                    AdminTemplate.getTypeSelected(),
                    AdminTemplate.getTemplateSelected()
                );
            });
        }
    }
});