import { MDCTab } from '@material/tab';
import { MDCTabBar } from '@material/tab-bar';
import { h, Host } from "@stencil/core";
export class Tabs {
    constructor() {
        this.color = 'background';
        this.indicatorType = 'underline';
        this.activeTab = 0;
    }
    componentWillLoad() {
        this.lookupTabs();
        new MutationObserver((mutationsList, _observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    this.lookupTabs();
                }
            }
        }).observe(this.host, { attributes: false, childList: true, subtree: true });
    }
    lookupTabs() {
        this.tabElements = Array.from(this.host.querySelectorAll('materials-tab'));
        this.tabElements.forEach((tab) => {
            new MutationObserver((mutationsList, _observer) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'attributes' || mutation.type === 'childList') {
                        this.tabElements = [...this.tabElements];
                    }
                }
            }).observe(tab, { attributes: true, childList: true, subtree: true });
        });
    }
    componentDidLoad() {
        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));
    }
    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);
        });
        Array.from(this.host.shadowRoot.querySelectorAll('.mdc-tab')).forEach(tab => MDCTab.attachTo(tab));
    }
    getIndicatorClasses() {
        return {
            'mdc-tab-indicator__content': true,
            'mdc-tab-indicator__content--icon': this.indicatorType === 'icon',
            'mdc-tab-indicator__content--underline': this.indicatorType === 'underline',
            'material-icons': this.indicatorType === 'icon'
        };
    }
    getTabClasses(tab) {
        return {
            'mdc-tab': true,
            'mdc-tab--active': tab.active,
            'mdc-tab--min-width': this.shrinkTabs
        };
    }
    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: "mdc-tab-bar", 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.tabElements.map(tab => {
                            const badge = tab.querySelector('materials-badge');
                            const label = tab.getAttribute('label') || tab.label;
                            return (h("button", { class: this.getTabClasses(tab), role: "tab", "aria-selected": "true", tabindex: tab.active ? '0' : '-1' },
                                h("span", { class: "mdc-tab__content" },
                                    tab.icon && h("span", { class: "mdc-tab__icon material-icons", "aria-hidden": "true" }, tab.icon),
                                    h("span", { class: "mdc-tab__text-label" }, label ? label : h("slot", null))),
                                h("span", { class: { 'mdc-tab-indicator': true, 'mdc-tab-indicator--active': tab.active } },
                                    h("span", { class: this.getIndicatorClasses() }, this.indicatorType === 'icon' && 'star')),
                                h("span", { class: "mdc-tab__ripple" }),
                                badge && h("materials-badge", null, badge.innerText)));
                        })))))));
    }
    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 {
        "tabElements": {}
    }; }
    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"; }
}
