// Provide functionality to all accordions
class Accordion {
    constructor({
        accordion = 'cwf-accordion',
        toggle = 'cwf-accordion__toggle',
        panel = 'cwf-accordion__panel',
        heading = 'cwf-accordion__heading',
        closing = 'cwf-accordion__heading--closing',
        overflow = 'cwf-accordion__overflow',
        body = 'cwf-accordion__body'
    } = {}) {
        // Store all selectors
        this.selectors = {
            accordion,
            toggle,
            panel,
            heading,
            closing,
            overflow,
            body
        };

        // Initialize arrays for the toggles, accordions, and panels...
        this.toggles = [];
        this.accordions = [];
        this.panels = [];
        // ... as well as an object for the current event
        this.current = {};

        // Bind "this" to the necessary methods
        this.onClick = this.onClick.bind(this);
        this.onKeyDown = this.onKeyDown.bind(this);
        this.onHashChange = this.onHashChange.bind(this);
    }

    // Get references to all accordion elements
    getReferences() {
        // Attempt to grab all toggles,
        this.toggles = Array.from(
            document.querySelectorAll(`.${this.selectors.toggle}`)
        );
        // ... accordions,...
        this.accordions = Array.from(
            document.querySelectorAll(`.${this.selectors.accordion}`)
        );
        // .. and accordion panels from the page
        this.panels = [];
        this.accordions.forEach((accordion) => {
            const panels = Array.from(
                accordion.querySelectorAll(`.${this.selectors.panel}`)
            );
            panels.forEach((panel) => {
                const heading = panel.querySelector(
                        `.${this.selectors.heading}`
                    ),
                    overflow = panel.querySelector(
                        `.${this.selectors.overflow}`
                    ),
                    body = panel.querySelector(`.${this.selectors.body}`);
                this.panels.push({
                    accordion,
                    panel,
                    heading,
                    overflow,
                    body
                });
            });
        });
    }

    // Check whether reduced motion is enabled locally or globally
    motionIsReduced() {
        // Check if reduced motion is enabled/disabled locally...
        const local = document.documentElement.getAttribute('data-reduced-motion'),
            // ... or enabled globally
            global  = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

        // If it's enabled/disabled locally, return its value...
        if (local) return local === 'true';
        // ... otherwise, return the global preference
        return global;
    }

    // Calculate an element's height (including padding, margin, and border)
    calcElHeight(element) {
        // Get the computed styles and top/bottom margins of the element...
        const styles = window.getComputedStyle(element),
            margins =
                parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
        // ... and return their sum rounded up in pixels
        return Math.ceil(element.offsetHeight + margins) + 'px';
    }

    // Open an accordion panel
    openPanel({ heading, overflow, body }) {
        // Focus the heading of the panel if instructed to do so
        if (this.current.focus) heading.focus();

        // If the panel is already opened, do nothing else
        if (heading.getAttribute('aria-expanded') === 'true') return;

        // If the current type is "hash", or if reduced motion is enabled locally or globally,...
        if (this.current.type === 'hash' || this.motionIsReduced())
            // ... simply open the panel with no animation
            return heading.setAttribute('aria-expanded', true);

        // Set the overflow's height to zero
        overflow.style.height = 0;

        // End the height transition
        function transitionEnd({ propertyName }) {
            // If the transition property isn't height, do nothing
            if (propertyName !== 'height') return;

            // Unbind from the overflow's transitionend event...
            overflow.removeEventListener('transitionend', transitionEnd);
            // ... and remove its height property
            overflow.style.removeProperty('height');
        }

        // Start the height transition
        function transitionStart() {
            // Bind to the overflow's transitionend event...
            overflow.addEventListener('transitionend', transitionEnd);
            // ... and set its height to that of the body's
            window.requestAnimationFrame(
                () => (overflow.style.height = this.calcElHeight(body))
            );
        }

        // Set the heading's aria-expanded attribute to true...
        heading.setAttribute('aria-expanded', true);
        // ... and start the height transition
        window.requestAnimationFrame(transitionStart.bind(this));
    }

    // Close an accordion panel
    closePanel({ heading, overflow, body }) {
        // If the panel is already closed, do nothing else
        if (heading.getAttribute('aria-expanded') === 'false') return;

        // If the current type is "hash", or if reduced motion is enabled locally or globally,...
        if (this.current.type === 'hash' || this.motionIsReduced())
            // ... simply close the panel with no animation
            return heading.setAttribute('aria-expanded', false);

        // Grab the closing class from the global selectors
        const { closing } = this.selectors;

        // Set the overflow's height to that of the body's
        overflow.style.height = this.calcElHeight(body);

        // End the height transition
        function transitionEnd({ propertyName }) {
            // If the transition property isn't height, do nothing
            if (propertyName !== 'height') return;

            // Unbind from the overflow's transitionend event,...
            overflow.removeEventListener('transitionend', transitionEnd);
            // ... set the heading's aria-expanded to false,...
            heading.setAttribute('aria-expanded', false);
            // ... remove the closing class from the heading,...
            heading.classList.remove(closing);
            // ... and remove the overflow's height property
            overflow.style.removeProperty('height');
        }

        // Start the height transition
        function transitionStart() {
            // Add a class to the heading signifying the panel is closing,...
            heading.classList.add(closing);
            // ... bind to the overflow's transitionend event,...
            overflow.addEventListener('transitionend', transitionEnd);
            // ... and set its height to zero
            window.requestAnimationFrame(() => (overflow.style.height = 0));
        }

        // Start the height transition
        window.requestAnimationFrame(transitionStart.bind(this));
    }

    // Set the the toggle button's action (expand or collapse)
    setToggle(action) {
        // Attempt to get the toggle to update, either from the current state or accordion...
        const toggle =
            this.current.toggle ||
            this.toggles.find(
                (toggle) =>
                    toggle.getAttribute('aria-controls') ===
                    this.current.accordion.id
            );
        // ... and if it wasn't found, do nothing else
        if (!toggle) return;

        // Finally, set the toggle's text...
        toggle.textContent = action ? 'Expand All' : 'Collapse All';
        // ... and action data attribute
        toggle.setAttribute('data-action', action);
    }

    // Toggle the panels
    togglePanels() {
        // For each panel of the current accordion,...
        this.current.panels.forEach(({ panel, heading, overflow, body }) => {
            // Ensure the heading does not have a closing class...
            heading.classList.remove(this.selectors.closing);
            // ... and the overflow does not have a height set,...
            overflow.style.removeProperty('height');
            // ... and store all relevant panel elements
            const target = { heading, overflow, body };

            // If the type of action was not from a toggle and the panel does not equal the current panel, close it
            if (this.current.type !== 'toggle' && panel !== this.current.panel)
                return this.closePanel(target);

            // If the current action is to open, open the panel
            if (this.current.action) return this.openPanel(target);

            // Otherwise, close the panel
            return this.closePanel(target);
        });

        // Set the toggle (flip if the action was from a toggle, otherwise always open)
        this.setToggle(
            this.current.type === 'toggle' ? !this.current.action : true
        );

        // Finally, reset the current accordion
        this.current = {};
    }

    // Find an element by type
    findElementByType(type, element, target) {
        // Define ways of finding an element based on type...
        const instructions = {
            toggle: {
                accordion: document.getElementById(
                    target.getAttribute('aria-controls')
                )
            },
            heading: {
                accordion: target.parentNode.parentNode.parentNode,
                panel: target.parentNode
            },
            hash: {
                accordion: target.parentNode.parentNode,
                panel: target
            }
        };
        // ... and return the proper element
        return instructions[type][element];
    }

    // Set action by type and target
    setActionByTypeAndTarget(type, target) {
        // If the type is "toggle", return the target's action dataset attribute...
        if (type === 'toggle') return target.dataset.action === 'true';
        // ... otherwise, return the opposite of the target's aria-expanded attribute
        return target.getAttribute('aria-expanded') !== 'true';
    }

    // Set the current accordion
    setCurrentAccordion(type, target, focus = false) {
        // Grab all necessary references and data...
        const accordion = this.findElementByType(type, 'accordion', target),
            panel =
                type !== 'toggle'
                    ? this.findElementByType(type, 'panel', target)
                    : undefined,
            toggle = type === 'toggle' ? target : undefined,
            panels = this.panels.filter(
                (panel) => panel.accordion === accordion
            ),
            action =
                type !== 'hash'
                    ? this.setActionByTypeAndTarget(type, target)
                    : true;
        // ... and set the current accordion
        this.current = {
            type,
            accordion,
            panel,
            panels,
            toggle,
            action,
            focus
        };
    }

    // Handle click events
    onClick(event) {
        // Grab the current target of the event
        const { currentTarget } = event;

        // If the current target is a toggle, find its associated accordion accordingly...
        if (currentTarget.classList.contains(this.selectors.toggle))
            this.setCurrentAccordion('toggle', currentTarget);
        // ... and if the current target is a panel heading, find its associated accordion accordingly
        if (currentTarget.classList.contains(this.selectors.heading))
            this.setCurrentAccordion('heading', currentTarget);

        // Finally, prevent the default behavior...
        event.preventDefault();
        // ... and toggle the panels
        return this.togglePanels(event);
    }

    // Focus a panel heading
    focusHeading({ key, currentTarget }) {
        // Grab the first/last panel as well as the max index
        const firstPanel = this.current.panels[0],
            maxIndex = this.current.panels.length - 1,
            lastPanel = this.current.panels[maxIndex];

        // If the "Home" key was pressed, focus the first panel heading...
        if (key === 'Home') return firstPanel.heading.focus();
        // ... and if the "End" key was pressed, focus the last panel heading
        if (key === 'End') return lastPanel.heading.focus();

        // Get the currently focused panel and its index
        const currentPanel = this.current.panels.find(
                (panel) => panel.heading === currentTarget
            ),
            currentIndex = this.current.panels.indexOf(currentPanel);

        // If the up arrow key was pressed,...
        if (key === 'ArrowUp') {
            // ... focus the last panel heading if the first panel heading is focused,...
            if (!currentIndex) return lastPanel.heading.focus();
            // ... otherwise focus the previous panel's heading
            return this.current.panels[currentIndex - 1].heading.focus();
        }

        // If the down arrow key was pressed,...
        if (key === 'ArrowDown') {
            // ... focus the first panel heading if the last panel is focused,...
            if (currentIndex === maxIndex) return firstPanel.heading.focus();
            // ... otherwise focus the next panel's heading
            return this.current.panels[currentIndex + 1].heading.focus();
        }
    }

    // Handle keydown events
    onKeyDown(event) {
        // Grab the target and key of the event and create a list of valid keys
        const { key, currentTarget } = event;

        // If a valid key has not been pressed, do nothing else
        if (
            !['Enter', ' ', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(key)
        )
            return;

        // Otherwise, find the heading's associated accordion,...
        this.setCurrentAccordion('heading', currentTarget);
        // ... prevent the default behavior
        event.preventDefault();

        switch (key) {
            // When the "Enter" or space key is pressed...
            case 'Enter':
            case ' ':
                // ... toggle the panels
                return this.togglePanels(event);
            // When the up or down arrow keys are pressed...
            case 'ArrowUp':
            case 'ArrowDown':
                // ... focus a panel heading relative to the current target
                return this.focusHeading({ key, currentTarget });
            // When the "Home" or "End" keys are pressed...
            case 'Home':
            case 'End':
                // ... focus their respective panel heading
                return this.focusHeading({ key });
        }
    }

    // Handle hash change events
    onHashChange(event) {
        // Grab the location hash...
        const { hash } = window.location,
            id = hash.substr(1),
            // ... and see if there's a valid target with that ID
            target = this.panels.find((element) => element.panel.id === id);

        // If no target was matched, do nothing else
        if (!target) return;

        // Set the current accordion...
        this.setCurrentAccordion('hash', target.panel, true);
        // ... and toggle the panels
        return this.togglePanels(event);
    }

    // Initialize the accordion panels
    initialize() {
        // First, get all references to the accordions, toggles, and panels
        this.getReferences();

        // If no accordions were found on the page, do nothing
        if (!this.accordions.length) return;

        // If no accordion panels were found on the page, do nothing
        if (!this.panels.length) return;

        // Bind to the toggles' click events if any exist
        if (this.toggles.length)
            this.toggles.forEach((toggle) =>
                toggle.addEventListener('click', this.onClick)
            );

        // Finally, for each panel heading...
        this.panels.forEach(({ heading }) => {
            // ... and bind to its click/keydown events
            heading.addEventListener('click', this.onClick);
            heading.addEventListener('keydown', this.onKeyDown);
        });

        // Handle location hash panel toggling on page load...
        this.onHashChange();
        // ... and on every hash change after that
        window.addEventListener('hashchange', this.onHashChange);
    }
}

export default Accordion;

// Provide functionality to all accordions
import Accordion from './functionality';

function initializeAccordions() {
    const accordions = new Accordion();
    accordions.initialize();
}

export default initializeAccordions;