import { h } from "@stencil/core";
import { handleListKeyboard } from "../../utils/a11y";
/**
 * Tabs 标签页组件
 * 选项卡切换组件
 */
export class Tabs {
    el;
    /** 当前激活的标签 */
    modelValue = '';
    /** 标签风格类型 */
    type = 'line';
    /** 是否可关闭 */
    closable = false;
    activeTab = '';
    tabs = [];
    /** 标签切换事件 */
    hbTabChange;
    /** 标签关闭事件 */
    hbTabRemove;
    componentDidLoad() {
        this.collectTabs();
        if (!this.modelValue && this.tabs.length > 0) {
            this.activeTab = this.tabs[0].key;
            this.modelValue = this.activeTab;
        }
        else {
            this.activeTab = this.modelValue;
        }
        this.updatePaneVisibility();
    }
    handleModelValueChange() {
        this.activeTab = this.modelValue;
        this.updatePaneVisibility();
    }
    collectTabs() {
        const panes = this.el.querySelectorAll('hb-tab-pane');
        const tabs = [];
        panes.forEach((pane) => {
            tabs.push({
                key: pane.getAttribute('key') || '',
                label: pane.getAttribute('label') || '',
            });
        });
        this.tabs = tabs;
    }
    updatePaneVisibility() {
        const panes = this.el.querySelectorAll('hb-tab-pane');
        panes.forEach((pane) => {
            const isActive = pane.getAttribute('key') === this.activeTab;
            pane.setAttribute('active', String(isActive));
        });
    }
    handleTabClick = (key) => {
        this.activeTab = key;
        this.modelValue = key;
        this.hbTabChange.emit(key);
        this.updatePaneVisibility();
        this.moveFocusToTab(key);
    };
    /** WAI-ARIA tabs：左右（横排）/上下（竖排）箭头在 tab 间切换聚焦的 tab。 */
    handleTabKeydown = (e, currentIndex) => {
        // 仅响应方向键 / Home / End；Enter/Space 由浏览器对可聚焦元素原生触发 click。
        const isArrow = e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown' ||
            e.key === 'Home' || e.key === 'End';
        if (!isArrow)
            return;
        e.preventDefault();
        const action = handleListKeyboard(e, {
            activeIndex: currentIndex,
            itemCount: this.tabs.length,
            loop: true,
        });
        if (action.type === 'navigate' && this.tabs[action.index]) {
            this.handleTabClick(this.tabs[action.index].key);
        }
    };
    moveFocusToTab(key) {
        const idx = this.tabs.findIndex((t) => t.key === key);
        if (idx < 0)
            return;
        const items = this.el.shadowRoot?.querySelectorAll('.hb-tabs__item');
        items?.[idx]?.focus();
    }
    render() {
        return (h("div", { key: '796e99789e8493219eebb94cc65fcbc2d7215518', class: { 'hb-tabs': true, [`hb-tabs--${this.type}`]: true } }, h("div", { key: 'f291d1e3acc730d0243aef4514018b881748c9ef', class: "hb-tabs__header" }, h("div", { key: 'a3cf56bb33eafea5b36d6f38e616838b9436d58b', class: "hb-tabs__nav", role: "tablist" }, this.tabs.map((tab, index) => {
            const selected = tab.key === this.activeTab;
            const tabId = `hb-tabs__tab-${tab.key}`;
            return (h("div", { class: {
                    'hb-tabs__item': true,
                    'hb-tabs__item--active': selected,
                }, role: "tab", id: tabId, "aria-selected": selected ? 'true' : 'false', tabindex: selected ? 0 : -1, "aria-controls": `hb-tabs__panel-${tab.key}`, onClick: () => this.handleTabClick(tab.key), onKeyDown: (e) => this.handleTabKeydown(e, index) }, h("span", { class: "hb-tabs__item-label" }, tab.label), this.closable && (h("span", { class: "hb-tabs__item-close", role: "button", "aria-label": "\u5173\u95ED\u6807\u7B7E", tabIndex: -1, onClick: (e) => {
                    e.stopPropagation();
                    this.hbTabRemove.emit(tab.key);
                } }, "\u00D7"))));
        }))), h("div", { key: '45fee79ae1148bc6385bcb161c757d0226b4309c', class: "hb-tabs__content" }, h("slot", { key: 'cb00f1ed24d5a937e378c238097a251b45f323c6' }))));
    }
    static get is() { return "hb-tabs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["tabs.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tabs.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "''"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'line' | 'card' | 'border-card'",
                    "resolved": "\"border-card\" | \"card\" | \"line\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u7B7E\u98CE\u683C\u7C7B\u578B"
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'line'"
            },
            "closable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u53EF\u5173\u95ED"
                },
                "getter": false,
                "setter": false,
                "attribute": "closable",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "activeTab": {},
            "tabs": {}
        };
    }
    static get events() {
        return [{
                "method": "hbTabChange",
                "name": "hbTabChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u7B7E\u5207\u6362\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "hbTabRemove",
                "name": "hbTabRemove",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u7B7E\u5173\u95ED\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleModelValueChange"
            }];
    }
}
//# sourceMappingURL=Tabs.js.map
