import { h } from '@stencil/core';
export class Tabs {
    componentDidLoad() {
        this.createGroup().then(() => {
            const [group] = this.tabGroup;
            this.selectGroup(group);
            if (this.selectedIndex)
                this.activeIndex = Number(this.selectedIndex) - 1;
        });
    }
    componentDidUpdate() {
        if (this.selectedIndex)
            this.activeIndex = Number(this.selectedIndex) - 1;
    }
    onSelectedTab(event) {
        const group = this.tabGroup.find(group => group.header.id === event.detail.id);
        this.selectGroup(group);
    }
    async createGroup() {
        const tabsHeaderElements = Array.from(this.host.querySelectorAll('ema-tab-header'));
        this.tabsHeader = [];
        tabsHeaderElements.map(async (el) => {
            this.tabsHeader.push(await el.getChild());
        });
        const tabsContentElements = Array.from(this.host.querySelectorAll('ema-tab-content'));
        this.tabsContent = [];
        tabsContentElements.map(async (el) => {
            this.tabsContent.push(await el.getChild());
        });
        await new Promise(r => setTimeout(r, 40));
        this.tabGroup = this.tabsHeader.map(header => {
            const content = this.tabsContent.find(content => content.name === header.name);
            return {
                header: header,
                content: content
            };
        });
    }
    selectGroup(group) {
        this.tabGroup.forEach(_ => {
            _.header.unselect();
            _.content.unselect();
        });
        group.header.select();
        group.content.select();
    }
    set activeIndex(index) {
        let i = 0;
        this.tabGroup.forEach(_ => {
            if (i == index) {
                _.header.select();
                _.content.select();
            }
            else {
                _.header.unselect();
                _.content.unselect();
            }
            i++;
        });
    }
    render() {
        return [
            h("div", { class: "ema-tabs-header" },
                h("slot", { name: "header" })),
            h("div", { class: "ema-tabs-content" },
                h("slot", { name: "content" }))
        ];
    }
    static get is() { return "ema-tabs"; }
    static get originalStyleUrls() { return {
        "$": ["tabs.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["tabs.css"]
    }; }
    static get properties() { return {
        "selectedIndex": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The selected visible tab-content"
            },
            "attribute": "selected-index",
            "reflect": false
        }
    }; }
    static get elementRef() { return "host"; }
    static get listeners() { return [{
            "name": "onSelect",
            "method": "onSelectedTab",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
