import { Host, h } from "@stencil/core";
/**
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
* @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
*/
export class PdsTabs {
    constructor() {
        this.tablistLabel = undefined;
        this.componentId = undefined;
        this.variant = undefined;
        this.activeTabName = undefined;
        this.activeTabIndex = undefined;
    }
    tabClickHandler(event) {
        if (this.componentId === event.detail[1]) {
            this.activeTabIndex = event.detail[0];
            this.activeTabName = this.tabs[this.activeTabIndex].name;
        }
    }
    handleKeyDown(ev) {
        const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
        if (keySet.includes(ev.key)) {
            ev.preventDefault();
            this.moveActiveTab(ev.key);
        }
    }
    moveActiveTab(key) {
        const firstTabNumber = 0;
        const lastTabNumber = this.tabs.length - 1;
        let moveFocusTo = null;
        switch (key) {
            case 'ArrowLeft':
                moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));
                break;
            case 'ArrowRight':
                moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);
                break;
            case 'Home':
                moveFocusTo = firstTabNumber;
                break;
            case 'End':
                moveFocusTo = lastTabNumber;
                break;
        }
        // Move focus to the button element within `pds-tab`
        this.tabs[moveFocusTo].children[0].focus();
        this.activeTabName = this.tabs[moveFocusTo].name;
        this.activeTabIndex = moveFocusTo;
    }
    findAllChildren() {
        this.tabs = this.el.querySelectorAll('pds-tab');
        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
    }
    propGeneration(child, index = 0) {
        child.parentComponentId = this.componentId.toString();
        child.variant = this.variant.toString();
        child.selected = (this.activeTabName === child.name) ? true : false;
        child['index'] = index;
    }
    passPropsToChildren() {
        this.tabs.forEach((child, index) => {
            if (this.activeTabName === child.name)
                this.activeTabIndex = index;
            this.propGeneration(child, index);
        });
        this.tabPanels.forEach((child) => {
            this.propGeneration(child);
        });
    }
    classNames() {
        let className = `pds-tabs`;
        if (this.variant && this.variant != 'primary') {
            const variantClassName = `pds-tabs--${this.variant}`;
            className += ' ' + variantClassName;
        }
        return className;
    }
    ;
    componentWillLoad() {
        this.findAllChildren();
    }
    componentWillRender() {
        this.passPropsToChildren();
    }
    render() {
        return (h(Host, { key: '8b7537e2fc9007aaca3c1a6baff0a1c3d6b2cb07', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '7afa678022c1170d3912137897a5ece92e7b4394', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'e2026e752548b4cdf8f768137e4bb567550ef3cd', name: "tabs" })), h("slot", { key: 'c3a3fbbfab88494b45e5d1cc6563877df2017f9f', name: "tabpanels" })));
    }
    static get is() { return "pds-tabs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-tabs.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "pds-tabs.css"]
        };
    }
    static get properties() {
        return {
            "tablistLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the aria-label attached to the tablist element"
                },
                "attribute": "tablist-label",
                "reflect": false
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'availability' | 'filter'",
                    "resolved": "\"availability\" | \"filter\" | \"primary\"",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets tabs variant styles as outlined in Figma documentation"
                },
                "attribute": "variant",
                "reflect": false
            },
            "activeTabName": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the starting active tab name and maintains the name as the component re-renders"
                },
                "attribute": "active-tab-name",
                "reflect": false
            },
            "activeTabIndex": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "attribute": "active-tab-index",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "pdsTabClick",
                "method": "tabClickHandler",
                "target": "body",
                "capture": false,
                "passive": false
            }, {
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pds-tabs.js.map
