// The default component class
import { Component } from '../../shared/component.js';

// Check whether reduced motion is enabled locally or globally
import { reducedMotion } from '../../shared/media/index.js';

// Provide functionality to all accordions
export class Accordion extends Component {
    constructor({
        prefix = 'cwf',
        accordion = 'accordion',
        toggle = 'accordion__toggle',
        panel = 'accordion__panel',
        heading = 'accordion__heading',
        closing = 'accordion__heading--closing',
        overflow = 'accordion__overflow',
        body = 'accordion__body'
    } = {}) {
        super({
            prefix,
            classes: {
                accordion,
                toggle,
                panel,
                heading,
                closing,
                overflow,
                body
            },
            references: {}
        });

        // Initialize 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.references.toggles = Array.from(
            document.querySelectorAll(this.selectors.toggle)
        );
        // ... accordions,...
        this.references.accordions = Array.from(
            document.querySelectorAll(this.selectors.accordion)
        );
        // .. and accordion panels from the page
        this.references.panels = [];
        this.references.accordions.forEach((accordion) => {
            const panels = Array.from(
                accordion.querySelectorAll(this.selectors.panel)
            );
            panels.forEach((panel) => {
                const heading = panel.querySelector(this.selectors.heading);
                const overflow = panel.querySelector(this.selectors.overflow);
                const body = panel.querySelector(this.selectors.body);
                this.references.panels.push({
                    accordion,
                    panel,
                    heading,
                    overflow,
                    body
                });
            });
        });
    }

    // 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' || reducedMotion())
            // ... 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' || reducedMotion())
            // ... simply close the panel with no animation
            return heading.setAttribute('aria-expanded', false);

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

        // 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.references.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.classes.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.references.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.classes.toggle))
            this.setCurrentAccordion('toggle', currentTarget);
        // ... and if the current target is a panel heading, find its associated accordion accordingly
        if (currentTarget.classList.contains(this.classes.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.references.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);
    }

    // Mount/unmount accordion functionality
    mount(run) {
        super.mount(run);

        // If mounting, get/store the references
        if (run) this.getReferences();

        // If no accordions were found on the page,...
        if (!this.references.accordions.length) {
            // ... and unmounting,...
            if (!run) {
                // ... delete the accordions references,...
                delete this.references.accordions;
                // ... otherwise, do nothing else
            } else return;
        }

        // If accordion toggles were found on the page,...
        if (this.references.toggles.length) {
            // ... listen to their click events
            this.references.toggles.forEach((toggle) =>
                toggle[this.listener]('click', this.onClick)
            );
        }

        // If unmounting, delete all accordion toggle references
        if (!run) delete this.references.toggles;

        // If accordion panels were found on the page,...
        if (this.references.panels.length) {
            // .. for each panel heading,...
            this.references.panels.forEach(({ heading }) => {
                // ... bind to its click/keydown events
                heading[this.listener]('click', this.onClick);
                heading[this.listener]('keydown', this.onKeyDown);
            });
        }

        // If unmounting, delete all accordion panel references
        if (!run) delete this.references.panels;

        // Handle location hash panel toggling on page load (if mounting)...
        if (run) this.onHashChange();
        // ... and on every hash change after that
        window[this.listener]('hashchange', this.onHashChange);
    }
}