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

// Lock/unlock document scrolling
import { toggleScrollLock } from '../../shared/event.js';

// Traps the focus to a specifc set of elements
import { trap as trapFocus } from '../../shared/focus.js';

// Find focusable descendants and toggle an element's tab order
import {
    descendants as getFocusableDescendants,
    toggle as toggleTabOrder
} from '../../shared/focus.js';

// Provide event driven functionality to the modals
export class Modal extends Component {
    // When the class is instantiated
    constructor({
        prefix = 'cwf',
        modal = 'modal',
        open = 'modal--open',
        overlay = 'modal__overlay',
        close = 'modal__close',
        dialog = 'modal__dialog'
    } = {}) {
        super({
            prefix,
            classes: {
                modal,
                open,
                overlay,
                close,
                dialog
            }
        });

        // For each event listener, bind this to it
        this.onClick = this.onClick.bind(this);
        this.onKeyDown = this.onKeyDown.bind(this);
        this.onAnimationEnd = this.onAnimationEnd.bind(this);
        this.onHashChange = this.onHashChange.bind(this);
        this.setup = this.setup.bind(this);

        // Register the toggle scroll lock...
        this.toggleScrollLock = toggleScrollLock.bind(this);
        // ... and trap focus functions to this component
        this.trapFocus = trapFocus.bind(this);
    }

    // Clear the location hash
    clearHash() {
        // Remove the location hash...
        window.location.hash = '';
        // ... without jumping back to the top of the page...
        document.scrollingElement.scrollTop = this.scrollTop;
        document.scrollingElement.scrollLeft = this.scrollLeft;
        // ... and if possible, remove the hash altogether
        if ('replaceState' in history)
            return history.replaceState(null, null, ' ');
    }

    // Handle click events
    onClick(overlay, close, { target }) {
        // If the overlay or close button were clicked, clear the location hash
        if ([overlay, close].includes(target)) return this.clearHash();
    }

    // Handle key down events
    onKeyDown(event) {
        // Attempt to find a modal that's actively open...
        const reference = this.references.find(
            ({ state }) => state.target && state.open
        );
        // ... and if none exist, do nothing else
        if (!reference) return;

        // Grab the key pressed
        const { key } = event;

        // If the escape key was pressed, clear the location hash
        if (key === 'Escape') return this.clearHash();

        // Otherwise, grab the dialog, focusables, and close button from the modal...
        const { dialog, focusables, close } = reference;
        // ... and if the tab key was pressed, trap the focus to them
        if (key === 'Tab')
            return this.trapFocus([dialog, ...focusables, close], event);
    }

    // Handle animation end events
    onAnimationEnd({ currentTarget: modal }) {
        // Remove this event handler...
        modal.removeEventListener('animationend', this.onAnimationEnd);
        // ... and the modal's open class
        modal.classList.remove(this.classes.open);
    }

    // Close the modal if open
    closeModal({ modal, state, overlay, dialog, focusables, close }) {
        // Close the modal
        state.open = false;
        modal.setAttribute('aria-hidden', true);

        // Next, remove all focusable elements from the tab order
        toggleTabOrder(false, overlay, dialog, ...focusables, close);

        // Finally, bind to its animation end event...
        modal.addEventListener('animationend', this.onAnimationEnd);
        // ... and unlock document scrolling
        this.toggleScrollLock();
    }

    // Open the given modal
    openModal({ modal, state, overlay, dialog, focusables, close }) {
        // Open the modal
        modal.setAttribute('aria-hidden', false);
        modal.classList.add(this.classes.open);
        state.open = true;

        // Add all focusable elements to the tab order
        toggleTabOrder(true, overlay, dialog, ...focusables, close);

        // Finally, focus the dialog box...
        dialog.focus();
        // ... and lock document scrolling
        this.toggleScrollLock();
    }

    // Toggle the given modal open or close
    toggleModal(reference) {
        // Grab the modal's state
        const { state } = reference;
        const { target, open } = state;

        // If the modal is already in its correct state, do nothing else
        if ((target && open) || (!target && !open)) return;

        // Otherwise, open it if it's the target...
        if (target) return this.openModal(reference);
        // ... and close it if not
        return this.closeModal(reference);
    }

    // Handle hash change events
    onHashChange() {
        // Attempt to grab the location hash
        const locationHash = window.location.hash;

        // Next, grab the element ID from the hash...
        const id = locationHash.substring(1);
        // ... and for each reference,...
        this.references = this.references.map((reference) => {
            // ... check if it's the target,...
            const target = reference.modal.id === id;
            // ... if it's already open,...
            const open = reference.modal.classList.contains(this.classes.open);
            // ... and update its state
            reference.state = { target, open };
            return reference;
        });

        // Finally, toggle each reference modal open or close
        this.references.forEach(this.toggleModal.bind(this));
    }

    // Setup a modal reference
    setup(reference) {
        // Grab the modal
        const modal = reference.modal || reference;

        // Grab the given modal's overlay...
        const overlay =
            reference.overlay || modal.querySelector(this.selectors.overlay);
        // ... and close button,...
        const close =
            reference.close || modal.querySelector(this.selectors.close);
        // ... and use them for the modal's click events
        const onClick =
            reference.onClick || this.onClick.bind(this, overlay, close);
        modal[this.listener]('click', onClick);

        // Next, grab the modal's dialog box...
        const dialog =
            reference.dialog || modal.querySelector(this.selectors.dialog);
        // ... and the dialog box's focusable descendants,...
        const focusables =
            reference.focusables || getFocusableDescendants(dialog);
        // ... and for each focusable descendant, remove it from the tab order
        focusables.forEach((focusable) => toggleTabOrder(!this.run, focusable));

        // Finally, store a reference of the modal and its relevent elements
        if (this.run)
            this.references.push({
                modal,
                overlay,
                close,
                onClick,
                dialog,
                focusables
            });
    }

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

        // Grab all the modals from the page...
        const modals = this.references.length
            ? this.references
            : Array.from(document.querySelectorAll(this.selectors.modal));
        // ... and set them up
        modals.forEach(this.setup);

        // If no modal references exist, do nothing else
        if (!this.references.length) return;

        // If running, immediately toggle the modals based on the current hash
        if (run) this.onHashChange();

        // Bind/unbind to the window's hash change...
        window[this.listener]('hashchange', this.onHashChange);
        // ... and document's key down events
        document[this.listener]('keydown', this.onKeyDown);

        // Finally, if unmounting, reset the references
        if (!run) this.references = [];
    }
}