/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __rest } from "tslib";
import { h } from "@stencil/core";
import { KolButtonWcTag, KolLinkWcTag } from "../../core/component-names";
import { validateLabel, validateToolbarItems } from "../../schema";
import { KeyboardKey } from "../../schema/enums";
import { validateOrientation } from "../../schema/props/orientation";
import { delegateClick, setClick } from "../../utils/element-click";
import { delegateFocus, setFocus } from "../../utils/element-focus";
export class KolToolbar {
    constructor() {
        this.state = {
            _label: '',
            _items: [],
        };
        this.currentIndex = 0;
        this.indexToElement = new Map();
        this.renderItem = (raw, index) => {
            const element = this.normalizeItem(raw);
            const tabIndex = index === this.currentIndex && !(element === null || element === void 0 ? void 0 : element._disabled) ? 0 : -1;
            const props = {
                key: index,
                class: 'button normal kol-toolbar__item',
                _tabIndex: tabIndex,
                _variant: 'normal',
            };
            const catchRef = (el) => {
                if (el)
                    this.indexToElement.set(index, el);
            };
            return element.type === 'link' ? (h(KolLinkWcTag, Object.assign({}, props, element, { ref: catchRef }))) : (h(KolButtonWcTag, Object.assign({}, props, element, { ref: catchRef })));
        };
    }
    async focus(options) {
        const firstEnabledItem = this.indexToElement.get(this.currentIndex);
        if (firstEnabledItem) {
            return delegateFocus(this.host, () => setFocus(firstEnabledItem, options));
        }
    }
    async click() {
        const currentItem = this.indexToElement.get(this.currentIndex);
        if (currentItem) {
            return delegateClick(this.host, async () => setClick(currentItem));
        }
    }
    normalizeItem(item) {
        const { _icons, _disabled } = item, rest = __rest(item, ["_icons", "_disabled"]);
        return Object.assign(Object.assign({}, rest), { _icons, _disabled });
    }
    render() {
        return (h("div", { key: '8f602796128e3c4135044a18d7663a950655404d', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
    }
    validateLabel(value) {
        validateLabel(this, value);
    }
    validateItems(value) {
        validateToolbarItems(this, value);
        this.indexToElement.clear();
        this.setFirstEnabledItemIndex();
    }
    validateOrientation(value) {
        validateOrientation(this, value);
    }
    getCurrentToolbarItem(index) {
        return typeof index === 'number' ? this.indexToElement.get(index) : undefined;
    }
    setFirstEnabledItemIndex() {
        var _a;
        this.currentIndex = (_a = this.state._items) === null || _a === void 0 ? void 0 : _a.findIndex((item) => !item._disabled);
    }
    handleKeyDown(event) {
        var _a, _b, _c, _d;
        const pressedKey = event.code;
        const isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);
        if (!isArrowKey)
            return;
        event.preventDefault();
        const lastItemIndex = ((_b = (_a = this._items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1;
        if (lastItemIndex < 0)
            return;
        const currentIndex = this.currentIndex;
        let nextIndex = currentIndex;
        switch (pressedKey) {
            case KeyboardKey.ArrowUp:
            case KeyboardKey.ArrowLeft:
                nextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;
                break;
            case KeyboardKey.ArrowDown:
            case KeyboardKey.ArrowRight:
                nextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;
                break;
        }
        if (currentIndex === nextIndex) {
            return;
        }
        if ((_d = (_c = this.state._items) === null || _c === void 0 ? void 0 : _c[nextIndex]) === null || _d === void 0 ? void 0 : _d._disabled) {
            return;
        }
        this.currentIndex = nextIndex;
        const item = this.getCurrentToolbarItem(nextIndex);
        if (this.host) {
            void (item === null || item === void 0 ? void 0 : item.focus());
        }
    }
    handleFocusout(event) {
        if (event.target === this.host)
            this.setFirstEnabledItemIndex();
    }
    componentWillLoad() {
        this.validateLabel(this._label);
        this.validateItems(this._items);
        this.validateOrientation(this._orientation);
        this.setFirstEnabledItemIndex();
    }
    static get is() { return "kol-toolbar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_label"
            },
            "_items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ToolbarItemsPropType",
                    "resolved": "ToolbarItemPropType[]",
                    "references": {
                        "ToolbarItemsPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ToolbarItemsPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the functional elements of toolbar to render (e.g. kol-link, kol-button)."
                },
                "getter": false,
                "setter": false
            },
            "_orientation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "OrientationPropType",
                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
                    "references": {
                        "OrientationPropType": {
                            "location": "import",
                            "path": "../../schema/props/orientation",
                            "id": "src/schema/props/orientation.ts::OrientationPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the orientation of the component is horizontal or vertical."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_orientation"
            }
        };
    }
    static get states() {
        return {
            "state": {},
            "currentIndex": {}
        };
    }
    static get methods() {
        return {
            "focus": {
                "complexType": {
                    "signature": "(options?: KolFocusOptions) => Promise<void>",
                    "parameters": [{
                            "name": "options",
                            "type": "KolFocusOptions | undefined",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KolFocusOptions": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KolFocusOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the currently active toolbar item.",
                    "tags": []
                }
            },
            "click": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Triggers a click on the currently active toolbar item.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_items",
                "methodName": "validateItems"
            }, {
                "propName": "_orientation",
                "methodName": "validateOrientation"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "focusout",
                "method": "handleFocusout",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=shadow.js.map
