import { MDCTab } from '@material/tab';
import { MDCTabBar } from '@material/tab-bar';
import { h, Host } from '@stencil/core';
export class Tabs {
    constructor() {
        // @State() private tabs: HTMLMaterialsTabElement[];
        this.color = 'background';
        this.indicatorType = 'underline';
        this.activeTab = 0;
        this.tabsContent = [];
    }
    async componentDidLoad() {
        const tabs = Array.from(this.host.querySelectorAll('materials-tab'));
        for (const tab of tabs) {
            tab.minWidth = this.shrinkTabs;
            tab.indicatorType = this.indicatorType;
            await tab.renderHtml().then((content) => this.tabsContent.push(content));
        }
        this.tabsContent = [...this.tabsContent];
    }
    componentDidUpdate() {
        this.mdcTabs = new MDCTabBar(this.host.shadowRoot.querySelector('.mdc-tab-bar'));
        this.mdcTabs.listen('MDCTabBar:activated', (tabs) => {
            const selectedIndex = tabs.detail.index;
            this.tabChange.emit(selectedIndex);
        });
        this.mdcTabs.activateTab(this.activeTab);
        Array.from(this.host.shadowRoot.querySelectorAll('.mdc-tab')).forEach(tab => MDCTab.attachTo(tab));
    }
    getClasses() {
        return {
            'mdc-tab-bar': true
        };
    }
    render() {
        return (h(Host, { class: {
                'materials-tab-background': this.color === 'background',
                'materials-tab-primary': this.color === 'primary',
                'materials-tab-secondary': this.color === 'secondary',
                'materials-tab-surface': this.color === 'surface'
            } },
            h("nav", { class: this.getClasses(), role: "tablist" },
                h("div", { class: "mdc-tab-scroller" },
                    h("div", { class: "mdc-tab-scroller__scroll-area" },
                        h("div", { class: "mdc-tab-scroller__scroll-content" }, this.tabsContent.map(tab => tab)))))));
    }
    static get is() { return "materials-tabs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["tabs.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["tabs.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'background' | 'primary' | 'secondary' | 'surface'",
                "resolved": "\"background\" | \"primary\" | \"secondary\" | \"surface\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'background'"
        },
        "indicatorType": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'underline' | 'icon'",
                "resolved": "\"icon\" | \"underline\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "indicator-type",
            "reflect": false,
            "defaultValue": "'underline'"
        },
        "shrinkTabs": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "shrink-tabs",
            "reflect": false
        },
        "activeTab": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active-tab",
            "reflect": false,
            "defaultValue": "0"
        }
    }; }
    static get states() { return {
        "tabsContent": {}
    }; }
    static get events() { return [{
            "method": "tabChange",
            "name": "tabChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            }
        }]; }
    static get elementRef() { return "host"; }
}
