import { h } from "@stencil/core";
export class KeyboardShortcutsDialog {
    constructor() {
        this.show = false;
        this.shortcuts = [];
        this.groupedShortcuts = [];
        this.isMac = typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0;
        this.KEY_MAP = {
            Meta: this.isMac ? "⌘" : "Win",
            Control: this.isMac ? "⌃" : "Ctrl",
            Alt: this.isMac ? "⌥" : "Alt",
            Shift: this.isMac ? "⇧" : "Shift",
            Enter: "↵",
            Escape: "Esc",
            ArrowUp: "↑",
            ArrowDown: "↓",
            ArrowLeft: "←",
            ArrowRight: "→",
        };
        this.handleKeyDown = (event) => {
            if (event.key === "Escape") {
                this.handleClose();
            }
            if (event.key !== "Tab")
                return;
            const activeElement = this.el.shadowRoot.activeElement;
            if (event.shiftKey) {
                if (activeElement === this.firstFocusable) {
                    event.preventDefault();
                    this.lastFocusable.focus();
                }
            }
            else {
                if (activeElement === this.lastFocusable) {
                    event.preventDefault();
                    this.firstFocusable.focus();
                }
            }
        };
    }
    handleShowChange(newValue) {
        if (newValue) {
            setTimeout(() => {
                this.initFocusTrap();
            });
        }
    }
    handleShortcutsChange() {
        this.groupedShortcuts = this.getGroupedShortcuts();
    }
    componentWillLoad() {
        this.groupedShortcuts = this.getGroupedShortcuts();
    }
    initFocusTrap() {
        const dialog = this.el.shadowRoot.querySelector(".shortcuts-content");
        const focusable = dialog.querySelectorAll(`
      button,
      [href],
      input,
      select,
      textarea,
      [tabindex]:not([tabindex="-1"])
    `);
        if (!focusable.length)
            return;
        this.firstFocusable = focusable[0];
        this.lastFocusable = focusable[focusable.length - 1];
        this.firstFocusable.focus();
    }
    handleClose() {
        this.closeDialog.emit();
    }
    formatKey(key) {
        return this.KEY_MAP[key] || key;
    }
    getGroupedShortcuts() {
        const grouped = this.shortcuts.reduce((acc, shortcut) => {
            if (!acc[shortcut.category]) {
                acc[shortcut.category] = [];
            }
            acc[shortcut.category].push(shortcut);
            return acc;
        }, {});
        return Object.entries(grouped);
    }
    render() {
        if (!this.show) {
            return null;
        }
        return (h("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "shortcuts-dialog-title", class: "shortcuts-backdrop", onClick: () => this.handleClose(), onKeyDown: this.handleKeyDown }, h("div", { class: "shortcuts-content", role: "document", tabindex: "-1", onClick: e => e.stopPropagation() }, h("div", { class: "shortcuts-header" }, h("h2", { id: "shortcuts-dialog-title" }, "Keyboard Shortcuts"), h("button", { class: "close-button", onClick: () => this.handleClose(), "aria-label": "Close shortcuts dialog" }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: "shortcuts-body" }, this.groupedShortcuts.map(([category, shortcuts]) => (h("div", { class: "shortcuts-category" }, h("h3", null, category), h("div", { class: "shortcuts-list" }, shortcuts.map(shortcut => {
            var _a;
            return (h("div", { class: "shortcut-item", tabindex: "0" }, h("span", { class: "shortcut-description" }, shortcut.description), h("div", { class: "shortcut-keys" }, (_a = shortcut.modifiers) === null || _a === void 0 ? void 0 :
                _a.map((modifier, index) => (h("span", null, h("kbd", { class: "key" }, this.formatKey(modifier)), index < shortcut.modifiers.length - 1 && h("span", { class: "key-separator" }, "+")))), shortcut.modifiers && shortcut.modifiers.length > 0 && h("span", { class: "key-separator" }, "+"), h("kbd", { class: "key" }, this.formatKey(shortcut.key)))));
        })))))), h("div", { class: "shortcuts-footer" }, h("p", { class: "shortcuts-hint" }, "Press ", h("kbd", { class: "key-inline" }, this.formatKey("Escape")), " to close")))));
    }
    static get is() { return "keyboard-shortcuts-dialog"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["keyboard-shortcuts-dialog.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["keyboard-shortcuts-dialog.css"]
        };
    }
    static get properties() {
        return {
            "show": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show",
                "defaultValue": "false"
            },
            "shortcuts": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "KeyboardShortcut[]",
                    "resolved": "KeyboardShortcut[]",
                    "references": {
                        "KeyboardShortcut": {
                            "location": "local",
                            "path": "/Users/alpeshp7/ai12z/aInfinity/packages/stencil-library/src/components/ai12z-bot/keyboard-shortcuts-dialog.tsx",
                            "id": "src/components/ai12z-bot/keyboard-shortcuts-dialog.tsx::KeyboardShortcut"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "groupedShortcuts": {}
        };
    }
    static get events() {
        return [{
                "method": "closeDialog",
                "name": "closeDialog",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "show",
                "methodName": "handleShowChange"
            }, {
                "propName": "shortcuts",
                "methodName": "handleShortcutsChange"
            }];
    }
}
