import { h } from "@stencil/core";
import { Host } from "@stencil/core/internal";
import { cls } from "../../utils/helpers";
export class XTabs {
    constructor() {
        this.fluid = undefined;
        this.block = false;
        this.position = 'left';
        this.tabs = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildTabs();
    }
    /**
     * On component will loaded hook
     */
    componentWillLoad() {
        this.computeChildTabs();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (!this.tabs.length) {
            return;
        }
        setTimeout(() => {
            const validTabs = this.tabs.filter(tab => !tab.disabled);
            const activeTabs = validTabs.filter(tab => tab.active);
            if (!activeTabs.length) {
                this.showTab(validTabs[0]);
            }
        }, 0);
    }
    /**
     * Update the child tabs and render the result
     */
    computeChildTabs() {
        this.tabs = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-tab')
            .map(el => el);
        this.tabs.forEach((tab, index) => {
            tab.index = index;
        });
    }
    /**
     * Show the content of selected tab by index and set active
     *
     * @param index
     * @param tab
     */
    showTab(tab) {
        this.tabs.filter(tab => tab.active).forEach(tab => {
            tab.active = false;
        });
        this.el.querySelectorAll('nav li.tab-active').forEach(li => li.classList.remove('tab-active'));
        setTimeout(() => {
            var _a;
            tab && (tab.active = true);
            (_a = this.el.querySelector(`.tab-index-${tab.index}`)) === null || _a === void 0 ? void 0 : _a.classList.add('tab-active');
        }, 0);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '905377ea3cf10d9cea984fa7658924adb0492d5e' }, h("nav", { key: 'ad3196f93b448030153a44e8664573fda3f58872', class: cls(`tabs-${this.position}`, { 'tabs-block': this.block, 'tabs-fluid': this.fluid }) }, h("ul", { key: '0238e0ca6aebd0f00637b15c21b530ce039b2e84' }, this.tabs.map((tab, i) => h("li", { key: i, class: cls(`tab-index-${i}`, { 'tab-disabled': tab.disabled, 'tab-active': tab.active }) }, h("a", { href: "javascript:;", tabIndex: i, onClick: () => this.showTab(tab) }, tab.icon && h("x-icon", { name: tab.icon }), h("span", null, tab.label), tab.badge && h("x-badge", { color: "primary" }, tab.badge)))))), h("div", { key: '606730707cfacad9828c988beaebc5533b56215c', class: "tab-content" }, h("slot", { key: '7e0e4169f7a315c6a34fb7a18bc3c124f3a858f5' })));
    }
    static get is() { return "x-tabs"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "fluid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element fluid style"
                },
                "attribute": "fluid",
                "reflect": false
            },
            "block": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element full width block style"
                },
                "attribute": "block",
                "reflect": false,
                "defaultValue": "false"
            },
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TabsPositionType",
                    "resolved": "\"centered\" | \"left\" | \"right\"",
                    "references": {
                        "TabsPositionType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-tabs/component.tsx",
                            "id": "src/components/x-tabs/component.tsx::TabsPositionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element align position tabs"
                },
                "attribute": "position",
                "reflect": false,
                "defaultValue": "'left'"
            }
        };
    }
    static get states() {
        return {
            "tabs": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "handleSlotChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
