var Wick = window.Wick || {};

Wick.PLPChips = {
    GROUP: '.plp-filters__group',
    TOGGLE: '.plp-filters__toggle',
    INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
    CHIPS_WRAP_SEL: '.plp-selected',
    BADGE_CLASS: 'plp-filters__badge',

    renderGroupCounters(rootWrapper) {
        rootWrapper.find(Wick.PLPChips.GROUP).each((_, el) => {
            const group = $(el);
            const name = group.attr('data-filter') || '';
            const count = Wick.PLPFilters.appliedState[name]
                ? Wick.PLPFilters.appliedState[name].size
                : 0;
            const btn = group.find(Wick.PLPChips.TOGGLE);
            const badgeSpan = btn.find(`.${Wick.PLPChips.BADGE_CLASS} span`);
            if (count > 0) {
                badgeSpan.text(count).css('display', 'flex');
            } else {
                badgeSpan.text('').hide();
            }
        });
    },

    renderChips(rootWrapper) {
        const wrap = rootWrapper.find(Wick.PLPChips.CHIPS_WRAP_SEL);
        if (!wrap.length) {
            return;
        }

        const list = wrap.find('.plp-selected__list');
        let clearAllBtn = wrap.find('.plp-selected__clear-all');

        list.empty();

        const total = Wick.PLPFilters.totalApplied();
        wrap.find('.plp-selected__clear-all').prop('hidden', total === 0);

        if (total === 0) {
            wrap.hide();
            if (clearAllBtn.length) {
                clearAllBtn.remove();
            }
            return;
        }

        Object.keys(Wick.PLPFilters.appliedState).forEach((group) => {
            Wick.PLPFilters.appliedState[group].forEach((value) => {
                list.append(
                    `<button type="button" class="pf-chip" data-group="${group}" data-value="${value}">
            <span class="pf-chip__text">${value}</span>
            <i class="fa fa-times pf-chip__close" aria-hidden="true"></i>
            <span class="sr-only">Remove ${value} from ${group}</span>
        </button>`
                );
            });
        });

        if (clearAllBtn.length) {
            clearAllBtn.prop('hidden', false);
            clearAllBtn.appendTo(list);
        } else {
            clearAllBtn = $(`
      <button type="button" class="plp-selected__clear-all btn btn-secondary">
        <i class="fa fa-times" aria-hidden="true"></i><span>Clear all</span>
      </button>
    `);
            list.append(clearAllBtn);
        }
    },

    bindChipActions(rootWrapper) {
        // remove one chip
        rootWrapper.on('click', '.pf-chip', (e) => {
            e.preventDefault();
            const chip = $(e.target).closest('.pf-chip');
            const groupDomName = chip.data('group');
            const valueOriginal = chip.data('value');

            Wick.PLPFilters.removeFromApplied(groupDomName, valueOriginal);
            Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
        });

        // clear all
        rootWrapper.on('click', '.plp-selected__clear-all', (e) => {
            e.preventDefault();
            Wick.PLPFilters.writeStateToURL({}, false);
        });
    },
};
