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

// Provide functionality to the breadcrumb
export class Breadcrumb extends Component {
    constructor({
        prefix = 'cwf',
        breadcrumb = 'breadcrumb',
        list = 'breadcrumb__list',
        listIsDropdown = 'breadcrumb__list--dropdown',
        item = 'breadcrumb__item',
        itemHasDropdown = 'breadcrumb__item--has-dropdown',
        itemExpandDropdown = 'breadcrumb__item--expand-dropdown',
        link = 'breadcrumb__link',
        toggle = 'breadcrumb__toggle'
    } = {}) {
        super({
            prefix,
            classes: {
                breadcrumb,
                list,
                listIsDropdown,
                item,
                itemHasDropdown,
                itemExpandDropdown,
                link,
                toggle
            }
        });

        // Bind "this" to the appropriate methods
        this.breadcrumbKeyboardNavigation =
            this.breadcrumbKeyboardNavigation.bind(this);
        this.closeDropdownGlobally = this.closeDropdownGlobally.bind(this);
        this.handleCloseDropdownGlobally =
            this.handleCloseDropdownGlobally.bind(this);
        this.dropdownKeyboardNavigation =
            this.dropdownKeyboardNavigation.bind(this);
        this.handleToggleDropdown = this.handleToggleDropdown.bind(this);
    }

    // Store breadcrumb references
    store() {
        // Attempt to grab all breadcrumbs...
        const elements = this.references.length
            ? this.references
            : Array.from(document.querySelectorAll(this.selectors.breadcrumb));
        // ... and if none exist, do nothing else
        if (!elements.length) return;

        // Finally, store the references
        this.references = elements.map((element) => {
            // If the reference is already an object, return the reference as is
            if (element.element) return element;

            // Otherwise, grab the breadcrumb's direct links...
            const links = Array.from(
                element.querySelectorAll(
                    [
                        ':scope',
                        this.selectors.list,
                        this.selectors.item,
                        this.selectors.link
                    ].join('>')
                )
            );
            // ... and create a reference object from the element and its links
            let reference = {
                element,
                links
            };

            // Next, check to see if a dropdown parent item exists...
            const parent = element.querySelector(
                this.selectors.itemHasDropdown
            );
            // ... and if doesn't, return the reference object as-is
            if (!parent) return reference;

            // Otherwise, set the reference's expanded flag to false...
            reference.expanded = false;
            // ... and add a dropdown key object consisting of...
            reference.dropdown = {
                // ... the dropdown parent item,...
                parent,
                // ... the toggle,...
                toggle: parent.querySelector(this.selectors.toggle),
                // ... the dropdown list,...
                list: parent.querySelector(this.selectors.listIsDropdown),
                // ... and the dropdown links
                links: Array.from(parent.querySelectorAll(this.selectors.link))
            };
            // ... and return the reference
            return reference;
        });
    }

    // Returns a reference containing the given element
    getReferenceOf(element, asArray = false) {
        // If the element is a boolean, return all references...
        if (typeof element === 'boolean') return this.references;
        // ... otherwise, find the reference containing the given element
        const match = this.references.find((reference) => {
            return (
                reference.links.includes(element) ||
                (reference.dropdown
                    ? reference.dropdown.toggle === element ||
                      reference.dropdown.links.includes(element)
                    : false)
            );
        });

        // Finally, if no match was found, return an appropriate nullish value...
        if (!match) return asArray ? [] : match;
        // ... or return the match in an array or by itself
        return asArray ? [match] : match;
    }

    // Breadcrumb keyboard navigation
    breadcrumbKeyboardNavigation(event) {
        // Grab the type and current target from the event
        const { type, currentTarget } = event;

        // Handle whether to add/remove a keydown event listener based on the event type...
        switch (type) {
            case 'focus': // Focus = add keydown event listener
                currentTarget.addEventListener(
                    'keydown',
                    this.breadcrumbKeyboardNavigation
                );
                break;
            case 'blur': // Blur = remove keydown event listener
                currentTarget.removeEventListener(
                    'keydown',
                    this.breadcrumbKeyboardNavigation
                );
        }
        // ... and if this isn't a keydown event, do nothing else
        if (type !== 'keydown') return;

        // Grab the key from the event...
        const { key } = event;
        // ... and if the key isn't home, left/right arrows, or end, do nothing else
        if (!['Home', 'ArrowLeft', 'ArrowRight', 'End'].includes(key)) return;

        // Prevent the default action
        event.preventDefault();

        // Attempt to grab the reference containing the current target,...
        const reference = this.getReferenceOf(currentTarget);
        // ... and if doesn't exist, do nothing else
        if (!reference) return;

        // Otherwise, create a list of focusable elements,...
        const focusable = [
            reference.dropdown ? reference.dropdown.toggle : null,
            ...reference.links
        ].filter(Boolean);
        // ... and figure out the first/last focusable element as well as the currently focused element's index
        const firstIndex = 0,
            firstFocusable = focusable[firstIndex],
            index = focusable.indexOf(currentTarget),
            lastIndex = focusable.length - 1,
            lastFocusable = focusable[lastIndex],
            isOnFirst = index === firstIndex,
            isOnLast = index === lastIndex;

        // Handle what to do based on what key was pressed
        switch (key) {
            case 'Home': // Home = Focus the first element
                return firstFocusable.focus();
            case 'ArrowLeft': // Left arrow = Focus the previous element, looping around to the last element
                return isOnFirst
                    ? lastFocusable.focus()
                    : focusable[index - 1].focus();
            case 'ArrowRight': // Right arrow = Focus the next element, looping around the first element
                return isOnLast
                    ? firstFocusable.focus()
                    : focusable[index + 1].focus();
            case 'End': // End = Focus the last element
                return lastFocusable.focus();
        }
    }

    // Handles generic focus/blur events
    handleFocusBlurEvents(element, listener) {
        element[this.listener]('focus', listener, false);
        element[this.listener]('blur', listener, false);
    }

    // Handle breadcrumb keyboard navigation
    handleBreadcrumbKeyboardNavigation(element) {
        this.handleFocusBlurEvents(element, this.breadcrumbKeyboardNavigation);
    }

    // Close the dropdown globally
    closeDropdownGlobally({ type, target }, { dropdown }) {
        // If the reference doesn't have a dropdown, do nothing else
        if (!dropdown) return;

        // Grab all dropdown references....
        const { parent, toggle, list, links } = dropdown;
        // ... and create a list of valid targets
        let targets = [
            parent,
            toggle,
            ...Array.from(toggle.children),
            list,
            ...links
        ];

        // Add all link children to the list of valid targets
        links.forEach(({ children }) => {
            targets.push(...children);
        });

        // If this is a click event and one of the valid targets were clicked, do nothing else
        if (type === 'click' && targets.includes(target)) return;

        // Otherwise, close the dropdown
        return this.handleToggleDropdown(false);
    }

    handleCloseDropdownGlobally(event) {
        // Grab the type and key from the event...
        const { type, key } = event;
        // ... and if the type is keydown but the key is not "Escape", do nothing else
        if (type === 'keydown' && key !== 'Escape') return;

        // Otherwise, close the dropdown for each current reference
        this.current.forEach(this.closeDropdownGlobally.bind(this, event));
    }

    // Toggle a dropdown open/close
    toggleDropdown(event, reference) {
        // If the reference doesn't have a dropdown, do nothing else
        if (!reference.dropdown) return;

        // Set the reference's expanded flag
        reference.expanded =
            typeof event === 'boolean' ? event : !reference.expanded;

        // Get the dropdown parent item
        const { parent } = reference.dropdown;

        // Add/remove the expanded class to the dropdown parent based on the expanded state
        parent.classList.toggle(
            this.classes.itemExpandDropdown,
            reference.expanded
        );

        // When an animation frame is available...
        window.requestAnimationFrame(() => {
            // If the event was a click, add a global keydown event to close the dropdown
            if (event.detail)
                document[super.stateListener(reference.expanded)](
                    'keydown',
                    this.handleCloseDropdownGlobally
                );

            // Add a global click event to close the dropdown
            document[super.stateListener(reference.expanded)](
                'click',
                this.handleCloseDropdownGlobally
            );
        });

        // If the event was a click...
        if (event.detail) return;
        // ... or the dropdown has been collapsed, do nothing else
        if (!reference.expanded) return;

        // Grab all the dropdown links...
        const { links } = reference.dropdown;
        // ... and focus the first one
        links[0].focus();
    }

    // Handle dropdown toggling
    handleToggleDropdown(event) {
        // Store whether the event is forced,...
        const forced = typeof event === 'boolean';
        // ... get the reference,...
        const references = this.getReferenceOf(
            forced || event.currentTarget,
            true
        );
        // ... and if the reference doesn't exist, do nothing else
        if (!references || !references.length) return;

        // Globally store the current references...
        this.current = references;
        // ... and toggle the dropdown for each reference
        references.forEach(this.toggleDropdown.bind(this, event));
    }

    // Dropdown keyboard navigation
    dropdownKeyboardNavigation(event) {
        // Grab the type and current target from the event
        const { type, currentTarget } = event;

        // Handle whether to add/remove a keydown event listener based on the event type...
        switch (type) {
            case 'focus': // Focus = add keydown event listener
                currentTarget.addEventListener(
                    'keydown',
                    this.dropdownKeyboardNavigation
                );
                break;
            case 'blur': // Blur = remove keydown event listener
                currentTarget.removeEventListener(
                    'keydown',
                    this.dropdownKeyboardNavigation
                );
        }
        // ... and if this isn't a keydown event, do nothing else
        if (type !== 'keydown') return;

        // Attempt to grab the reference of the current target...
        const reference = this.getReferenceOf(currentTarget);
        // ... and if none were found, do nothing else
        if (!reference) return;

        // Grab the key from the event...
        const { key } = event;
        // ... and if it's escape,...
        if (key === 'Escape') {
            // ... close the dropdown,...
            this.handleToggleDropdown(false);
            // ... and focus the dropdown toggle
            return reference.dropdown.toggle.focus();
        }

        // If the key isn't home, up/down arrows, or end, do nothing else
        if (!['Home', 'ArrowUp', 'ArrowDown', 'End'].includes(key)) return;

        // Prevent the default action
        event.preventDefault();

        // Grab the dropdown links...
        const { links } = reference.dropdown;
        // ... and figure out...
        const firstIndex = 0;
        // ... the first...
        const firstLink = links[firstIndex];
        const index = links.indexOf(currentTarget);
        const lastIndex = links.length - 1;
        // ... and last links...
        const lastLink = links[lastIndex];
        // ... as well as the currently focused link's index
        const isOnFirst = index === firstIndex;
        const isOnLast = index === lastIndex;

        // Handle what to do based on what key was pressed
        switch (key) {
            case 'Home': // Home = Focus the first link
                return firstLink.focus();
            case 'ArrowUp': // Up arrow = Focus the previous link, looping around to the last link
                return isOnFirst ? lastLink.focus() : links[index - 1].focus();
            case 'ArrowDown': // Down arrow = Focus the previous, looping around the first link
                return isOnLast ? firstLink.focus() : links[index + 1].focus();
            case 'End': // End = Focus the last link
                return lastLink.focus();
        }
    }

    // Handle dropdown keyboard navigation
    handleDropdownKeyboardNavigation(element) {
        this.handleFocusBlurEvents(element, this.dropdownKeyboardNavigation);
    }

    // Handle breadcrumb functionality
    functionality() {
        // For each reference,...
        this.references.forEach(({ links, dropdown }) => {
            // ... handle breadcrumb keyboard navigation on the direct links...
            links.forEach(this.handleBreadcrumbKeyboardNavigation.bind(this));
            // ... and if it doesn't have a dropdown, do nothing else
            if (!dropdown) return;

            const { toggle, links: dropdownLinks } = dropdown;

            // Otherwise, handle dropdown toggling when the toggle is clicked,...
            toggle[this.listener]('click', this.handleToggleDropdown, false);
            // ... handle breadcrumb keyboard navigation on the dropdown toggle,...
            this.handleBreadcrumbKeyboardNavigation(toggle);
            // ... and handle dropdown keyboard navigation on the dropdown links
            dropdownLinks.forEach(
                this.handleDropdownKeyboardNavigation.bind(this)
            );
        });
    }

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

        // If mounting, store breadcrumb references...
        if (run) this.store();
        // ... and handle their functionality
        this.functionality();

        // If unmounting, delete the breadcrumb references
        if (!run) this.references = [];
    }
}