BX.ready(function () {

    BX.namespace("PopupproAdminTemplates");

    BX.PopupproAdminTemplates = function(templatesType = undefined, templatesPopup = undefined){

        if (typeof templatesType == "undefined") return false;
        if (typeof templatesPopup == "undefined") return false;

        this.templates = {
            selected: false,
            list: templatesPopup
        };
        this.types = {
            default: "banner",
            list: templatesType
        };


        this.init();
    };

    BX.PopupproAdminTemplates.prototype = {
        init: function () {
            this._events();
            BX.onCustomEvent('onTemplatesLoaded', [this]);
        },

        setSelected: function(selectedTypeName, selectedTemplateName) {

            this.templates.selected = selectedTemplateName;
            this.types.selected = selectedTypeName;

            for (let type in this.types.list) {
                if (type === selectedTypeName) {
                    this.types.list[type].active = true;
                } else {
                    this.types.list[type].active = false;
                }
            }
        },

        getTypeSelected: function()
        {
            return this.types.list[this.getTypeSelectedName()];
        },

        getTypeSelectedName: function()
        {
            for (let typeName in this.types?.list) {
                if (this.types.list[typeName].active) {
                    return this.types.list[typeName].code;
                }
            }
            return this.types.default;
        },

        getTemplateSelected: function() {
            let type = this.getTypeSelectedName();
            for (let template of this.templates.list[type]) {
                if (template.active) {
                    return template;
                }
            }
            return false;
        },

        getTemplateSelectedName: function (){
            return this.getTemplateSelected().template;
        },

        getTemplatesList: function(type = false) {
            return type ? this.templates.list[type] : this.templates.list;
        },

        updateProp: function(name, value) {
            let template = this.getTemplateSelected();
            template['props'][name] = value;
        },

        renderDOMTemplateList: function (){
            let container = BX.create({
                tag: "select",
                attrs:{
                    name: "template"
                }
            });
            let type = this.getTypeSelectedName();

            for(let item of this.templates.list[type])
            {
                container.insertAdjacentElement("beforeend", BX.create({
                    tag: "option",
                    attrs: {
                        value: item.template,
                        selected: (this.getTemplateSelectedName() === item.template) ? true : false
                    },
                    text: item.name
                }));
            }

            return container;
        },

        _events: function () {
            let _self = this;
            BX.addCustomEvent('onChangeTemplate', function (params) {
                _self.setSelected(params.type, params.template);
            });
        }
    };

});