/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { getTabbableElements } from "./tabbable";
let activeModals = [];
export default class Modal {
    element;
    tabDirection = 'forward';
    constructor(element) {
        this.element = element;
        this.handleFocusIn = this.handleFocusIn.bind(this);
        this.handleKeyDown = this.handleKeyDown.bind(this);
    }
    activate() {
        activeModals.push(this.element);
        document.addEventListener('focusin', this.handleFocusIn);
        document.addEventListener('keydown', this.handleKeyDown);
    }
    deactivate() {
        activeModals = activeModals.filter((modal) => modal !== this.element);
        document.removeEventListener('focusin', this.handleFocusIn);
        document.removeEventListener('keydown', this.handleKeyDown);
    }
    isActive() {
        // The "active" modal is always the most recent one shown
        return activeModals[activeModals.length - 1] === this.element;
    }
    handleFocusIn(event) {
        const path = event.composedPath();
        // Trap focus so it doesn't go out of the modal's boundary
        if (this.isActive() && !path.includes(this.element)) {
            const tabbableElements = getTabbableElements(this.element);
            const index = this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;
            tabbableElements[index]?.focus({ preventScroll: true });
        }
    }
    handleKeyDown(event) {
        // Quick hack to determine tab direction
        if (event.key === 'Tab' && event.shiftKey) {
            this.tabDirection = 'backward';
            setTimeout(() => (this.tabDirection = 'forward'));
        }
    }
}
