$(document).ready(function () {
    const SELECTORS = {
        quickFilter: '.quick-filter',
        swiperContainer: '.swiper-container',
        pagination: '.swiper-pagination',
        nextButton: '.quick-filter__next-btn',
        prevButton: '.quick-filter__prev-btn',
    };

    const CSS_CLASSES = {
        locked: 'quick-filter--locked',
        colourSwatch: 'quick-filter--colour',
        textOnly: 'quick-filter--text',
        bulletClass: 'swiper-pagination-bullet',
        bulletActiveClass: 'swiper-pagination-bullet-active',
    };

    const CONFIG = {
        speed: 400,
        defaultSpaceBetween: 16,
        textOnlySpaceBetween: 8,
        resizeDebounceTime: 250,
        breakpoints: {
            mobile: 767,
            mobileSpaceBetween: 8,
        },
    };

    function shouldSkipSlider($slider) {
        return $slider.hasClass(CSS_CLASSES.colourSwatch);
    }

    function getSpaceBetween($slider) {
        const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
        return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
    }

    function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
        return {
            speed: CONFIG.speed,
            spaceBetween: spaceBetween,
            slidesPerView: 'auto',
            watchOverflow: true,
            pagination: {
                el: $pagination[0],
                type: 'bullets',
                clickable: true,
                bulletClass: CSS_CLASSES.bulletClass,
                bulletActiveClass: CSS_CLASSES.bulletActiveClass,
            },
            navigation: {
                nextEl: $nextBtn[0],
                prevEl: $prevBtn[0],
            },
            breakpoints: {
                [CONFIG.breakpoints.mobile]: {
                    spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
                },
            },
            on: {
                lock: handleLock,
                unlock: handleUnlock,
            },
        };
    }

    function handleLock() {
        this.el.parentElement.classList.add(CSS_CLASSES.locked);
    }

    function handleUnlock() {
        this.el.parentElement.classList.remove(CSS_CLASSES.locked);
    }

    function initializeSwiper($slider) {
        const $container = $slider.find(SELECTORS.swiperContainer);
        const $pagination = $slider.find(SELECTORS.pagination);
        const $nextBtn = $slider.find(SELECTORS.nextButton);
        const $prevBtn = $slider.find(SELECTORS.prevButton);

        const spaceBetween = getSpaceBetween($slider);
        const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);

        const swiper = new Swiper($container[0], config);

        bindResizeHandler(swiper);
    }

    function bindResizeHandler(swiper) {
        $(window).on(
            'resize',
            _.debounce(function () {
                swiper.update();
            }, CONFIG.resizeDebounceTime)
        );
    }

    function init() {
        $(SELECTORS.quickFilter).each(function (index, slider) {
            const $slider = $(slider);

            if (shouldSkipSlider($slider)) {
                return;
            }

            initializeSwiper($slider);
        });
    }

    init();
});
