import { buildClassList } from "@boldpenguin/sdk-utility";
import { h } from "@stencil/core";
export class BpSdkTabGroup {
    constructor() {
        this.updateIndex = (index) => {
            if (index >= this.tabs.length) {
                index = this.tabs.length - 1;
            }
            if (index < 0) {
                index = 0;
            }
            this.groupIndex = index;
        };
        this.onKeyboard = (event) => {
            switch (event.key) {
                case 'ArrowLeft':
                    this.updateIndex(this.groupIndex - 1);
                    break;
                case 'ArrowRight':
                    this.updateIndex(this.groupIndex + 1);
                    break;
            }
        };
        this.onTabSelect = (index) => () => this.updateIndex(index);
        this.code = '';
        this.tabs = [];
        this.groupIndex = 0;
        this.useExternal = false;
    }
    resetState() { }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-tab-group');
        customElements.whenDefined('bp-sdk-external-tab-group').then(() => {
            this.useExternal = true;
        });
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-tab-group", { code: this.code, tabs: this.tabs, groupIndex: this.groupIndex }, this.tabs.map((tab) => (h("slot", { name: `${this.code}-${tab}` })))));
    }
    onIndexChanged(index) {
        this.tabChanged.emit(index);
    }
    renderInternal() {
        return (h("div", { id: `${this.code}-tab-container`, class: "bp-sdk-tab__container" }, h("ul", { class: "bp-sdk-tab__list", role: "tablist", tabindex: "1", onKeyUp: this.onKeyboard }, this.tabs.map((tab, index) => (h("li", { role: "tab", id: `bp-sdk-tab__list-item-${this.code}-${tab}`, "aria-selected": index === this.groupIndex, tabindex: "-1", class: buildClassList(`bp-sdk-tab__list-item bp-sdk-tab`, { 'bp-sdk-tab__list-item--selected': index === this.groupIndex }), onClick: this.onTabSelect(index), onKeyUp: this.onTabSelect(index) }, tab)))), this.tabs.map((tab, index) => (h("div", { id: `bp-sdk-tab__group-panel-${this.code}-${tab}`, class: buildClassList(`bp-sdk-tab-group-panel`, {
                'bp-sdk-visually-hidden': index !== this.groupIndex,
            }), "aria-labelledby": `bp-sdk-tab__list-item-${this.code}-${tab}`, role: "tabpanel", "aria-hidden": index !== this.groupIndex }, h("slot", { name: `${this.code}-${tab}` }, "No content"))))));
    }
    static get is() { return "bp-sdk-tab-group"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bp-sdk-tab-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-tab-group.css"]
        };
    }
    static get properties() {
        return {
            "code": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Group code"
                },
                "attribute": "code",
                "reflect": false,
                "defaultValue": "''"
            },
            "tabs": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tabs to display"
                },
                "defaultValue": "[]"
            },
            "groupIndex": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tab index"
                },
                "attribute": "group-index",
                "reflect": true,
                "defaultValue": "0"
            }
        };
    }
    static get states() {
        return {
            "useExternal": {}
        };
    }
    static get events() {
        return [{
                "method": "tabChanged",
                "name": "tabChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "groupIndex",
                "methodName": "onIndexChanged"
            }];
    }
}
