BX.ready(function () {
    BX.namespace("PopupproAdminConstructorPrize");
    BX.PopupproAdminConstructorPrize = function (data) {

        this.prizes = BX.parseJSON(data.prizes);

        let json = BX.parseJSON(data.items);
        this.items =  json ? json : this.getList();

        this.container = document.querySelector('.constructor-prize');
        this.table = this.container.querySelector(".table-drag-drop-container");
        this.template = {
            row: document.querySelector("#template-constructor-prize-row").content
        };
        this.gravityList = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


        this.init();
        this._event();

    };
    BX.PopupproAdminConstructorPrize.prototype = {

        init: function () {
            this._renderRows();
            this.onChange();
        },

        add: function () {
            if(this.getList().length >= 9)
            {
                window.confirm(BX.message("SKYWEB24_POPUPPRO_TABLE_THIMBLES_MESSAGE_FORM_ADD_ITEM"));
                return false;
            }

            this._renderRow({text: "", gravity: 50, chance: 50});
        },

        remove: function (e) {
            if(this.getList().length <= 3)
            {
                window.confirm(BX.message("SKYWEB24_POPUPPRO_TABLE_THIMBLES_MESSAGE_FORM_DELETE_ITEM"));
                return false;
            }

            BX.findParent(
                e.target,
                {
                    className: 'tddc_item'
                }
            ).remove();

        },

        getList: function () {
            let items = [];
            let template = BX.ManagerPopup.Templates.getTemplateSelected();
            if (template && template.props['LIST_WINS']) {
                let data = JSON.parse(template.props['LIST_WINS']);
                if (data) {
                    items = data;
                }
            }
            return items;

        },

        _renderRows: function () {

            BX.cleanNode(this.table);

            for (let item of this.items) {
                this._renderRow(item);
            }
        },

        _renderRow: function (item) {
            let tableRow = this.template.row.cloneNode(true);
            tableRow.querySelector(".sort").innerHTML = 0;

            tableRow.querySelector(".text").append(BX.create({
                tag: "input",
                attrs: {
                    type: "text",
                    name: "thimbles_text[]",
                    value: item.text
                }
            }));

            tableRow.querySelector(".rules").append(BX.create({
                tag: "select",
                attrs: {
                    className: "rules_list",
                    name: "thimbles_prize[]"
                },
                children: this._renderPrizeList(item.prizeId)
            }));

            tableRow.querySelector(".chance").append(BX.create({
                tag: "select",
                attrs: {
                    name: "thimbles_gravity[]",
                    className: "gravity_value"
                },
                children: this._renderGravityList(item.gravity),
            }));


            tableRow.querySelector(".chance").append(BX.create({
                tag: "span",
                children: [
                    BX.create({
                        tag: "span",
                        attrs: {
                            className: "chance_text"
                        },
                        style: {
                            marginLeft: "10px"
                        },
                        text: item.chance + "%"
                    }),
                    BX.create({
                        tag: "input",
                        attrs: {
                            type: "hidden",
                            className: "chance_value",
                            name: "thimbles_chance[]",
                            value: item.chance
                        },
                    })
                ]
            }));

            this.table.append(tableRow);

            BX.DragDrop.create({
                'dragItemControlClassName': 'tddc_item-key',
                'dragItemClassName': 'tddc_item',
                'dragActiveClass': 'tddc_item-active',
                'dropZoneList': this.table,
                'dragEnd': BX.proxy(this._resort, this),
                'sortable': {
                    'rootElem': this.table,
                    'gagClass': 'sort',
                }
            });
        },

        _renderPrizeList: function (itemSelectId) {

            let htmlOptions = [];

            for(let group in this.prizes) {

                let optgroup = BX.create({
                    tag: "optgroup",
                    attrs: {
                        label: this.prizes[group].name
                    }
                });

                for(let prize of this.prizes[group]['items'])
                {
                    optgroup.append(BX.create({
                        tag: "option",
                        attrs: {
                            value: prize.id,
                            selected: (itemSelectId == prize.id) ? true : false,
                            "data-group": group
                        },
                        text: prize.title + " [" + prize.id + "]"
                    }))
                }
                htmlOptions.push(optgroup);
            }

            return htmlOptions;
        },

        _renderGravityList: function (itemGravity) {

            let htmlOptions = [];

            for (let chance of this.gravityList) {
                htmlOptions.push(BX.create({
                    tag: "option",
                    attrs: {
                        value: chance,
                        selected: (parseInt(chance) == parseInt(itemGravity)) ? true : false
                    },
                    text: chance
                }));
            }

            return htmlOptions;
        },

        _resort: function () {
            let items = this.table.querySelectorAll(".tddc_item");
            let index = 1;

            for (let item of items) {
                item.querySelector(".sort").innerHTML = index;
                index++;
            }
        },

        _reChance: function () {

            let items = this.table.querySelectorAll(".tddc_item");
            let gravityTotal = 0;

            for (let item of items) {
                let chanceContainer = item.querySelector(".chance");
                gravityTotal += parseInt(chanceContainer.querySelector("select").value);
            }


            for (let item of items) {
                let chanceContainer = item.querySelector(".chance");
                let gravity = parseInt(chanceContainer.querySelector("select").value);
                let value = Math.round(gravity / (gravityTotal / 100) * 10) / 10;
                value = (!!value) ? value : 0;

                chanceContainer.querySelector(".chance_text").innerHTML = value + "%";
                chanceContainer.querySelector(".chance_value").value = value;
            }
        },

        _editLinkCoupon: function()
        {
            let selects = this.container.querySelectorAll(".rules select");
            if(selects.length == 0)
            {
                return false;
            }

            for(let select of selects)
            {
                let parent = BX.findParent(select);

                let target = select.querySelector("option[value='"+ select.value +"']");
                if(!target) return  false;
                let group = target.dataset.group;

                let link = parent.querySelector(".rules_link");
                if(link) link.remove();

                if(group == "coupon")
                {
                    parent.append(
                        BX.create({
                                tag: "a",
                                attrs: {
                                    href: `/bitrix/admin/sale_discount_edit.php?ID=${select.value}&lang=ru`,
                                    className: "rules_link",
                                    target: "_blank"
                                },
                                text: BX.message("SKYWEB24_POPUPPRO_TABLE_THIMBLES_BUTTON_EDIT_COUPON")
                            }
                        )
                    );
                }
            }

        },

        onChange: function (e) {

            this.worker =  (!this.worker) ? this : this.worker;

            switch (this.action) {
                case "add": this.worker.add(e); break;
                case "remove": this.worker.remove(e); break;
            }

            this.worker._resort();
            this.worker._reChance();
            this.worker._editLinkCoupon();

            managerPopupPro.updatePreview();
        },

        _event: function () {

            BX.bindDelegate(this.container, 'click',
                {className: 'add-item'},
                BX.proxy(this.onChange, {action: "add", worker: this})
            );

            BX.bindDelegate(this.container, 'click',
                {className: 'remove-item'},
                BX.proxy(this.onChange, {action: "remove", worker: this})
            );

            BX.bindDelegate(this.container, 'change',
                {tagName: ["select"]},
                BX.proxy(this.onChange, this)
            );

            /*BX.bindDelegate(this.container, 'change',
                {
                    tagName: ["select"],
                    className: "rules_list"
                },
                BX.proxy(this.onEditLinkCoupon, this)
            );*/

            BX.bindDelegate(this.container, 'keyup',
                {tagName: ["input"]},
                BX.proxy(this.onChange, this)
            );


            BX.addCustomEvent('onChangeTemplate', BX.proxy(function () {
                this.items = this.getList();
                this.init();
            }, this));
        }
    };

});