var Wick = window.Wick || {};

Wick.PLPFiltersPanel = {
    ROOT: '.plp-filters',
    BAR: '.plp-filters__bar',
    GROUP: '.plp-filters__group',
    TOGGLE: '.plp-filters__toggle',
    PANEL: '.plp-filters__panel',

    init() {
        // toggle
        $(document).on('click', Wick.PLPFiltersPanel.TOGGLE, Wick.PLPFiltersPanel.togglePanel);

        // close outside filters / ESC
        $(document).on('click', (e) => {
            const root = $(Wick.PLPFiltersPanel.ROOT);
            if (!root.is(e.target) && root.has(e.target).length === 0) {
                Wick.PLPFiltersPanel.closeAll();
            }
        });

        $(document).on('keydown', (e) => {
            if (e.key === 'Escape') {
                Wick.PLPFiltersPanel.closeAll();
            }
        });

        // responsive (position of the opened panel)
        $(window).on(
            'resize',
            _.debounce(() => {
                const open = $(Wick.PLPFiltersPanel.GROUP + '.is-open').first();
                if (open.length) {
                    const btn = open.find(Wick.PLPFiltersPanel.TOGGLE).first();
                    Wick.PLPFiltersPanel.layoutPanel(btn);
                }
            }, 120)
        );
    },

    togglePanel(e) {
        e.preventDefault();
        const btn = $(this);
        const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
        const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
        const willOpen = !group.hasClass('is-open');

        Wick.PLPFiltersPanel.closeAll();
        if (willOpen) {
            group.addClass('is-open');
            btn.attr('aria-expanded', 'true');
            panel.attr('aria-hidden', 'false');
            requestAnimationFrame(() => Wick.PLPFiltersPanel.layoutPanel(btn));
        }
    },

    closeAll() {
        $(Wick.PLPFiltersPanel.GROUP).removeClass('is-open');
        $(Wick.PLPFiltersPanel.TOGGLE).attr('aria-expanded', 'false');
        $(Wick.PLPFiltersPanel.PANEL)
            .attr('aria-hidden', 'true')
            .removeClass('plp-filters__panel--wide plp-filters__panel--auto')
            .css({ left: '', right: '' });
    },

    layoutPanel(btn) {
        const root = $(Wick.PLPFiltersPanel.ROOT);
        const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
        const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();

        let bar = group.closest(Wick.PLPFiltersPanel.BAR);
        if (!bar.length) {
            bar =
                root.find('.plp-filters__bar-desktop:visible').first() ||
                root.find('.plp-filters__bar-desktop').first() ||
                root.find(Wick.PLPFiltersPanel.BAR).filter(':visible').first() ||
                root.find(Wick.PLPFiltersPanel.BAR).first();
        }
        if (!bar.length || !panel.length) {
            return;
        }

        panel
            .removeClass('plp-filters__panel--wide plp-filters__panel--auto')
            .css({ left: '', right: '', width: '' });

        const barOff = bar.offset();
        const groupOff = group.offset();
        const barW = Math.round(bar.outerWidth());
        const groupLeftWithinBar = Math.round(groupOff.left - barOff.left);

        const type = Wick.PLPUtils.getPanelType(panel);
        const items = Math.max(1, Wick.PLPUtils.countItems(panel));

        if (type === 'cards') {
            Wick.PLPUtils.setCardsColumns(panel, Math.min(items, 4));
            let leftWithinBar = groupLeftWithinBar;
            const panelW = panel.outerWidth();
            if (leftWithinBar + panelW > barW) {
                leftWithinBar = barW - panelW;
            }
            if (leftWithinBar < 0) {
                leftWithinBar = 0;
            }
            panel.css({ left: leftWithinBar - groupLeftWithinBar });
            return;
        }
        if (type === 'swatches') {
            const panelW = panel.outerWidth();
            let leftWithinBar = groupLeftWithinBar;
            if (leftWithinBar + panelW > barW) {
                leftWithinBar = barW - panelW;
                if (leftWithinBar < 0) {
                    leftWithinBar = 0;
                }
            }
            panel.css({ left: leftWithinBar - groupLeftWithinBar });
            return;
        }
        // text → fix to the right edge
        panel.css({ right: 0 });
    },
};
