(() => {
    if (window.IntecKosmosCatalogDelivery)
        return
    
    window.IntecKosmosCatalogDelivery = class  {
        /**
         * @type {boolean} active
         **/
        active = false;
        /**
         * @type {HTMLElement} root
         **/
        root;
        /**
         * @type {object} visual
         **/
        visual = {};
        /**
         * @type {object} params
         **/
        params = {};
        /**
         * @type {object} city
         **/
        city = {};
        /**
         * @type {object} deliveries
         **/
        deliveries = {};
        /**
         * @type {object} counter
         **/
        counter = {};
        /**
         * @type {String} path
         **/
        path = '';
        /**
         * @type {object} quantity
         **/
        quantity = {};
        /**
         * @type {HTMLElement} basket
         **/
        basket = null;

        /**
         * @param {HTMLElement} root
         * @param {{
         * params: Object,
         * templateName: String,
         * path: String,
         * }} parameters
         * @returns {Window.IntecKosmosCatalogDelivery}
         */
        constructor(root = null, cityId, parameters= {}) {
            if (root instanceof HTMLElement)
                this.root = root;
                this.jQuery = application.libraries.load('$');
                this.params = parameters.params;
                this.cityId = cityId;
                this.templateName = parameters.templateName;
                this.path = parameters.path;
                this.deliveries = {
                    instance: root.querySelector('[data-role="deliveries"]'),
                };
                this.basket = {
                    instance: root.querySelector('[data-role="useBasket"]'),
                    state: false,
                };
                this.counter = {
                    instance: root.querySelector('[data-role="counter"]'),
                };
                this.quantity = 0;
                this.city = {
                    cityBlock: root.querySelector('[data-role="cityBlock"]'),
                    cityForm: root.querySelector('[data-role="city.select"]'),
                    current: root.querySelectorAll('[data-role="currentCity"]'),
                    currentName: root.querySelector('[data-role="currentCity"]').querySelector('[data-role="currentCityName"]')
                };

                this.active = true;
        }

        init() {
            if (this.active) {
                if (this.city.current instanceof NodeList)
                    this.changeLocation();

                if (this.basket.instance instanceof HTMLElement)
                    this.useBasket();

                if (this.counter.instance instanceof HTMLElement)
                    this.setCounter();

                if (this.deliveries.instance.querySelectorAll('[data-role="elemDetails"]') instanceof NodeList) {
                    this.openDelivery(this.deliveries);
                }
            }
        }

        setCounter() {
            this.counter.instance.addEventListener('change', (event) => {
                this.quantity = event.detail[0];
                this.setRequest();
            })
        }

        openDelivery(container) {
            this.deliveries.instance.querySelectorAll('[data-role="elemDetails"]').forEach((item) => {
                item.addEventListener('click', () => {
                    const delivery = item.closest('[data-role="delivery"]');
                    const blockDetails = delivery.querySelector('[data-role="blockDetails"]');

                    if (blockDetails.getAttribute('data-expanded') === 'true') {
                        Velocity(blockDetails, 'slideUp',  {duration: 400});
                        blockDetails.setAttribute('data-expanded', false);
                    } else {
                        Velocity(blockDetails, 'slideDown',  {duration: 400});
                        blockDetails.setAttribute('data-expanded', true);
                    }
                })
            });
        }

        useBasket() {
            this.basket.instance.addEventListener('change',  () => {
                this.basket.state = !!this.basket.instance.checked;
                this.setRequest();
            });
        }

        changeLocation() {
            this.city.current.forEach((current) => {
                current.addEventListener('click', () => {
                    if (this.city.cityBlock.getAttribute('data-expanded') === 'true') {
                        this.city.cityBlock.setAttribute('data-expanded', false);
                    } else {
                        this.city.cityBlock.setAttribute('data-expanded', true);
                    }
                });
            });
        }

        setRequest() {
            this.jQuery.ajax({
                type: 'POST',
                url: this.path,
                data: {
                    sessid: (typeof BX !== 'undefined' && BX.bitrix_sessid) ? BX.bitrix_sessid() : '',
                    delivery: {
                        ajax: 'y'
                    },
                    cityID: this.cityId,
                    quantity: this.quantity,
                    useBasket: this.basket.state ? 'y':'n',
                    template: this.templateName,
                    params: this.params
                },
                success: (response) => {
                    this.deliveries.instance.innerHTML = response;
                    this.openDelivery(this.deliveries);
                }
            });
        }
    }
})();