Accordion

import { addClass, removeClass, hasClass } from '../../../../js/utils/_helpers';
import addToDataLayer from '../../../../js/utils/datalayer';

export class Accordion {
    constructor(module) {
        this.titles = module.querySelectorAll('[data-accordion-title]');
        this.panels = module.querySelectorAll('[data-accordion-panel]');
        this.hideAllOnOpen = module.dataset.hideAllOnOpen && module.dataset.hideAllOnOpen.toLowerCase() === 'true';

        this.titles.forEach((title) => {
            title.setAttribute('tabindex', '0');
            title.addEventListener('click', (e) => {
                if (hasClass(e.target, 'is-open')) {
                    Accordion.hidePanel(e.target);
                } else {
                    this.showPanel(e.target);
                }
            });
            title.querySelector('.js-toggle').addEventListener('click', () => {
                if (hasClass(title, 'is-open')) {
                    Accordion.hidePanel(title);
                } else {
                    this.showPanel(title);
                }
            });
            title.addEventListener('keypress', (e) => {
                if (e.keyCode === 32 || e.keyCode === 13) { // space bar || enter
                    if (hasClass(e.target, 'is-open')) {
                        Accordion.hidePanel(e.target);
                    } else {
                        this.showPanel(e.target);
                    }
                }
            });
        });
    }

    static hidePanel(title) {
        removeClass(title, 'is-open');
        removeClass(title.nextElementSibling, 'is-open');
    }

    showPanel(title) {
        Accordion.trackClick(title);
        if (this.hideAllOnOpen) {
            // remove show state on titles
            this.titles.forEach((t) => {
                removeClass(t, 'is-open');
            });
            // remove show state on content
            this.panels.forEach((panel) => {
                removeClass(panel, 'is-open');
            });
        }

        addClass(title, 'is-open');
        addClass(title.nextElementSibling, 'is-open');
    }

    static trackClick(title) {
        addToDataLayer({
            'event': 'link.click',
            'linkName': title.innerText,
            'linkType': 'accordion',
        });
    }
}

export default (module) => new Accordion(module);