document.addEventListener('DOMContentLoaded', () => {
    window.addEventListener('load', () => {
        /* CUSTOM LINKS HANDLER */
        const custom_links = document.querySelectorAll('[custom-link]');
        if (custom_links.length) {
            for (const link of custom_links) {
                const url = link.getAttribute('custom-link');
                const isTab = link.getAttribute('tab-link');
                if (url) link.setAttribute("href", url);
                if (isTab) {
                    link.addEventListener('click', (e) => {
                        e.preventDefault();

                        window.location.href = link.href;
                    })
                }
            }
        }
    });

    /* Search handlers */
    function searchHandler(trigger, wrap) {
        if (!trigger || !wrap) return;

        trigger.addEventListener("click", openSearch);
        document.addEventListener("click", hideSearch);

        function openSearch() {
            if (wrap.classList.contains('open')) {
                wrap.classList.remove("open");
            } else {
                wrap.classList.add("open");
            }
        }

        function hideSearch(event) {
            var target = event.target;
            if (target !== trigger && target !== wrap && !wrap.contains(target)) {
                wrap.classList.remove("open");
            }
        }
    }

    searchHandler(
        document.getElementById("search-open"),
        document.getElementById("search-wrap")
    );
    searchHandler(
        document.getElementById("search-open-light"),
        document.getElementById("search-wrap-light")
    );

    /* Custom "SortBy" Select */
    function sortByHandler(trigger, wrap, items, label) {
        if (!trigger || !wrap) return;

        trigger.addEventListener("click", toggleWrap);
        document.addEventListener("click", hideWrap);

        if (items.length) {
            for (let item of items) {
                item.addEventListener("click", () => changeLabel(item));
            }
        }

        function toggleWrap() {
            if (!wrap.classList.contains('open')) {
                wrap.classList.add("open");
            } else {
                wrap.classList.remove("open");
            }
        }

        function hideWrap(event) {
            var target = event.target;
            if (target !== trigger && target !== wrap && !wrap.contains(target)) {
                wrap.classList.remove("open");
            }
        }

        function changeLabel(item) {
            label.innerText = item.innerText;
        }
    }
    sortByHandler(
        document.querySelector(".products__sort-header"),
        document.querySelector(".products__sort-content"),
        document.querySelectorAll(".products__sort-item"),
        document.querySelector(".products__sort-label"),
    );
    accordionHandler(
        document.querySelectorAll('.footer__list-block'),
        '.footer__list-block-header',
        '.footer__list-block-dropdown',
        '.footer__list-wrap',
        true,
        true
    );
    accordionHandler(
        document.querySelectorAll('.footer__lang'),
        '.footer__lang-header',
        '.footer__lang-icon',
        '.footer__lang-content',
        true,
        true
    );
    accordionHandler(
        document.querySelectorAll('.favourite-container'),
        '.favourite__heading',
        '.favourite__heading-icon',
        '.favourite__content',
        false,
        false
    );
    accordionHandler(
        document.querySelectorAll('.releases__tab-menu'),
        '.releases__tab-menu-header',
        '.releases__tab-menu-header-icon',
        '.releases__tab-menu-wrapper',
        false,
        true
    );
    accordionHandler(
        document.querySelectorAll('.resources-faq__item'),
        '.resources-faq__item-header',
        '.resources-faq__item-header-icon',
        '.resources-faq__item-content',
        false,
        false
    );
    accordionHandler(
        document.querySelectorAll('.filter__container-block.collapse-block'),
        '.filter__container-block-header',
        '.filter__container-block-header-icon',
        '.filter__container-block-content',
        false,
        false
    );
    accordionHandler(
        document.querySelectorAll('.contact-info__grid-item'),
        '.contact-info__grid-item-header',
        '.contact-info__grid-item-header-icon',
        '.contact-info__grid-item-content',
        false,
        true
    );
    /* TABS HANDLER */
    function tabs_handler(navs, panes, content) {
        const tab_items = navs;
        const tab_panes = panes;
        const tab_content = content;
        let in_progress = false;

        if (tab_items.length) {
            tab_items[0].classList.add('active');

            for (let i = 0; i < tab_items.length; i++) {
                if (tab_panes[i].classList.contains('active')) {
                    tab_panes[i].style.display = 'flex';
                } else {
                    tab_panes[i].style.display = 'none';
                }

                tab_content.style.opacity = 1;

                tab_items[i].addEventListener('click', () => nav_click_handler(i));
            }
        }

        function nav_click_handler(i) {
            if (in_progress || tab_items[i].classList.contains('active')) return;

            in_progress = true;
            reset_active();

            tab_items[i].classList.add('active');

            setTimeout(() => {
                tab_panes[i].classList.add('active');
                tab_panes[i].style.display = 'flex';
            }, 300);

            setTimeout(() => {
                tab_content.style.opacity = 1;
                in_progress = false;
            }, 600);
        }

        function reset_active() {
            for (let i = 0; i < tab_items.length; i++) {
                tab_items[i].classList.remove('active');

                if (tab_panes[i].classList.contains('active')) {
                    tab_content.style.opacity = 0;

                    setTimeout(() => {
                        tab_panes[i].style.display = 'none';
                        tab_panes[i].classList.remove('active');
                    }, 300);
                }

            }
        }
    }

    tabs_handler(
        document.querySelectorAll('.resources-faq__tab-nav-item'),
        document.querySelectorAll('.resources-faq__tab-pane'),
        document.querySelector('.resources-faq__tab-content')
    );

});