import Accordion from './accordion.js';

(function () {
    if (!Accordion) { // eslint-disable-line no-undef
        return;
    }

    const selected = document.querySelectorAll('.accordion');
    for (let i = selected.length; i--;) {
        new Accordion(selected[i]); // eslint-disable-line no-undef
    }
}());

export default function (elem, options) {
    const expandedContent = [];

    /**
     * Override default options with options param.
     */
    options = (() => {
        const defaults = {
            expand: (button, content) => {
                content.style.maxHeight = `${content.scrollHeight}px`;
            },
            collapse: (button, content) => {
                content.style.maxHeight = 0;
            },
            transitionEnd: (e) => {
                if (e.propertyName !== "max-height") {
                    return;
                }
                if (
                    !e.currentTarget.classList.contains("accordion--expanded")
                ) {
                    e.currentTarget.setAttribute("hidden", "hidden");
                }
            },
            resizeEvent: (e, expandedContent) => {
                for (let i = expandedContent.length; i--; ) {
                    options.expand(null, expandedContent[i]);
                }
            },
            init: true,
            buttonSelector: "button.js-accordion__trigger",
            accordionExpandedClass: "accordion--expanded",
            expandMultiple: false,
            disableHash: false,
        };
        const keys = Object.keys(defaults);
        options = options || {};

        for (let i = keys.length; i--; ) {
            options[keys[i]] = options[keys[i]] || defaults[keys[i]];
        }

        if (elem.classList.contains("accordion--multiple")) {
            options.expandMultiple = true;
        }
        if (elem.classList.contains("accordion--nohash")) {
            options.disableHash = true;
        }

        return options;
    })();

    const buttons = elem.querySelectorAll(options.buttonSelector);

    /**
     * Toggle aria-expanded attributes and trigger visibility Change function.
     *
     * @param {event} e The triggered event.
     */
    const toggle = (e) => {
        e.preventDefault();
        const button = e.currentTarget;
        if (!options.expandMultiple) {
            closeAllExcept(button);
        }
        button.setAttribute(
            "aria-expanded",
            button.getAttribute("aria-expanded") === "true" ? "false" : "true"
        );
        setVisibility(button);

        // If the accordion is being expanded, update the URL hash
        if (button.getAttribute("aria-expanded") === "true") {
            const newPath = `${window.location.pathname}#${button.getAttribute(
                "aria-controls"
            )}`;

            // Set the userTriggered flag to true because this is a user action
            // userTriggered = true;

            // Change the URL hash
            if (!options.disableHash) {
                history.pushState(null, null, newPath);
            }
            
        }
    };

    /**
     * Handle keyboard input: arrows, home & end.
     *
     * @param {event} e The triggered event.
     */
    const keyDown = (e) => {
        const keyCode = e.keyCode || e.which;
        let current = (() => {
            for (let i = buttons.length; i--; ) {
                if (buttons[i] === e.currentTarget) {
                    return i;
                }
            }
        })();
        switch (keyCode) {
            case 40: // arrow down
                e.preventDefault();
                if (current === buttons.length - 1) {
                    current = -1;
                }
                buttons[current + 1].focus();
                break;
            case 38: // arrow up
                e.preventDefault();
                if (current === 0) {
                    current = buttons.length;
                }
                buttons[current - 1].focus();
                break;
            case 36: // home
                e.preventDefault();
                buttons[0].focus();
                break;
            case 35: // end
                e.preventDefault();
                buttons[buttons.length - 1].focus();
                break;
        }
    };

    /**
     * Add events to buttons.
     * Listen for animationEnd on accordionContent.
     */
    const addEvents = () => {
        const onResize = (e) => {
            options.resizeEvent(e, expandedContent);
        };

        for (let i = buttons.length; i--; ) {
            const button = buttons[i];
            button.addEventListener("click", toggle);
            button.addEventListener("keydown", keyDown);

            const accordionContent = elem.querySelector(
                `#${button.getAttribute("aria-controls")}`
            );
            accordionContent.addEventListener(
                "transitionend",
                options.transitionEnd
            );

            if (options.resizeEvent) {
                window.addEventListener("resize", onResize);
            }
        }

        window.addEventListener("hashchange", hashEvent);
    };

    /**
     * Hide or show the accordion content.
     *
     * @param {Object} button  The accordion button.
     * @param {boolean|false} isInitial  True if this is the first run
     *   triggered by init().
     */
    const setVisibility = (button, isInitial) => {
        const accordionContent = elem.querySelector(
            `#${button.getAttribute("aria-controls")}`
        );
        if (!accordionContent) {
            return;
        }

        if (button.getAttribute("aria-expanded") === "true") {
            accordionContent.classList.add(options.accordionExpandedClass);
            accordionContent.setAttribute("aria-hidden", "false");
            accordionContent.removeAttribute("hidden");
            expandedContent.push(accordionContent);
            options.expand(button, accordionContent);
        } else {
            accordionContent.classList.remove(options.accordionExpandedClass);
            accordionContent.setAttribute("aria-hidden", "true");
            if (isInitial) {
                accordionContent.setAttribute("hidden", "hidden");
            }
            expandedContent.filter((content) => content !== accordionContent);
            options.collapse(button, accordionContent);
        }
    };

    /**
     * Set all attributes and toggle visibility accordingly.
     */
    const setInitial = () => {
        for (let i = buttons.length; i--; ) {
            setVisibility(buttons[i], true);
        }
    };

    const close = (button) => {
        button.setAttribute("aria-expanded", "false");
        setVisibility(button);
    };

    /**
     * Closes all accordion items.
     */
    const closeAll = () => {
        for (let i = buttons.length; i--; ) {
            close(buttons[i]);
        }
    };

    /**
     * Closes all accordion items.
     */
    const closeAllExcept = (button) => {
        for (let i = buttons.length; i--; ) {
            if (buttons[i] !== button) {
                close(buttons[i]);
            }
        }
    };

    const open = (button) => {
        button.setAttribute("aria-expanded", "true");
        setVisibility(button);
    };

    /**
     * Opens all accordion items.
     */
    const openAll = () => {
        for (let i = buttons.length; i--; ) {
            open(buttons[i]);
        }
    };

    /**
     * Open the accordion-content related to the location hash.
     */
    const hashEvent = () => {
        const hash = window.location.hash.replace("#", "");
        if (!hash) {
            return;
        }
        try {
            const trigger = elem.querySelector(`[aria-controls=${hash}]`);
            if (trigger) {
                // Close all accordions except the one we want to open if expandMultiple is false
                if (!options.expandMultiple) {
                    closeAllExcept(trigger);
                }
                open(trigger);
                // Instead of directly focusing, we wait for the transition to end,
                const accordionContent = elem.querySelector(
                    `#${trigger.getAttribute("aria-controls")}`
                );
                accordionContent.addEventListener(
                    "transitionend",
                    function () {
                        trigger.focus();
                    },
                    { once: true }
                ); // Use 'once' option to ensure this listener only fires one time.
            }
        } catch (e) {}
    };

    /**
     * Enable accordion functionality.
     */
    const init = () => {
        setInitial();
        addEvents();
        hashEvent();
    };

    if (options.init !== false) {
        init();
    }

    return { init, closeAll, openAll };
}