import { h } from "@stencil/core";
export class SpwTabs {
    constructor() {
        /** Onglet actif par défaut */
        this.defaultActiveTab = '1';
        /** Variante des onglets */
        this.variant = 'default';
        /** Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie */
        this.hasEllipsis = false;
        /** Permet de spécifier la taille de l'onglet */
        this.size = 'small';
        /** Onglet actuellement actif */
        this.activeTab = '1';
    }
    componentWillLoad() {
        if (!this.activeTab || this.activeTab === '1') {
            this.activeTab = this.defaultActiveTab;
        }
    }
    componentDidLoad() {
        this.applyVariantToChildren();
        this.updateActiveStates();
        setTimeout(() => {
            this.applyMaxWidthToChildren();
        }, 100);
    }
    activeTabChanged() {
        this.updateActiveStates();
        this.tabChanged.emit(this.activeTab);
    }
    maxWidthChanged() {
        this.applyMaxWidthToChildren();
    }
    hasEllipsisChanged() {
        this.applyVariantToChildren();
    }
    /**
     * Récupère l'onglet actuellement sélectionné
     * @returns {Promise<string>} L'ID de l'onglet actif
     */
    async getSelectedTab() {
        return this.activeTab;
    }
    /**
     * Définit l'onglet sélectionné
     * @param tabId L'ID de l'onglet à sélectionner
     * @returns {Promise<void>}
     */
    async setSelectedTab(tabId) {
        this.activeTab = tabId;
    }
    handleTabSelected(event) {
        const path = event.composedPath();
        const firstTabsInPath = path.find(el => el.tagName === 'SPW-TABS');
        if (firstTabsInPath !== this.el) {
            return;
        }
        this.activeTab = event.detail;
        event.stopPropagation();
    }
    slotChanged() {
        this.applyVariantToChildren();
        this.updateActiveStates();
        this.applyMaxWidthToChildren();
    }
    updateActiveStates() {
        const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
        const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent);
        const contents = Array.from(this.el.querySelectorAll('spw-tabs-content')).filter(isInThisComponent);
        navItems.forEach(item => {
            item.active = item.tabId === this.activeTab;
        });
        contents.forEach(content => {
            content.active = content.tabId === this.activeTab;
        });
    }
    applyMaxWidthToChildren() {
        if (!this.maxWidth) {
            return;
        }
        requestAnimationFrame(() => {
            const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
            const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent);
            const ellipsisClass = `--ellipsis`;
            navItems.forEach(item => {
                var _a;
                const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
                if (!textContent) {
                    return;
                }
                const measureEl = document.createElement('div');
                measureEl.style.cssText = `
          position: absolute;
          visibility: hidden;
          white-space: nowrap;
          top: -9999px;
          left: -9999px;
        `;
                measureEl.textContent = textContent;
                const computedStyle = window.getComputedStyle(item);
                measureEl.style.fontSize = computedStyle.fontSize;
                measureEl.style.fontFamily = computedStyle.fontFamily;
                measureEl.style.fontWeight = computedStyle.fontWeight;
                measureEl.style.fontStyle = computedStyle.fontStyle;
                measureEl.style.letterSpacing = computedStyle.letterSpacing;
                measureEl.style.textTransform = computedStyle.textTransform;
                document.body.appendChild(measureEl);
                const contentWidth = measureEl.getBoundingClientRect().width;
                document.body.removeChild(measureEl);
                if (contentWidth > this.maxWidth) {
                    item.style.setProperty('--spw-tabs-max-width-text', `${this.maxWidth}px`);
                    item.setAttribute('has-ellipsis', 'true');
                    item.classList.add(ellipsisClass);
                }
                else {
                    item.style.removeProperty('--spw-tabs-max-width-text');
                    item.setAttribute('has-ellipsis', 'false');
                    item.classList.remove(ellipsisClass);
                }
            });
        });
    }
    applyVariantToChildren() {
        requestAnimationFrame(() => {
            var _a, _b;
            const variantClass = `--${this.variant}`;
            const sizeClass = `--${this.size}`;
            const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
            const navigationSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="navigation"]');
            const contentSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="content"]');
            const navigationElements = ((navigationSlot === null || navigationSlot === void 0 ? void 0 : navigationSlot.assignedElements({ flatten: true })) || []).filter(isInThisComponent);
            const contentElements = ((contentSlot === null || contentSlot === void 0 ? void 0 : contentSlot.assignedElements({ flatten: true })) || []).filter(isInThisComponent);
            navigationElements.forEach(el => {
                if (el.tagName === 'SPW-TABS-NAVIGATION') {
                    el.classList.add(variantClass);
                    el.querySelectorAll('spw-tabs-navigation-item').forEach(item => {
                        if (isInThisComponent(item)) {
                            item.classList.add(variantClass);
                            item.classList.add(sizeClass);
                        }
                    });
                }
                else if (el.tagName === 'SPW-TABS-NAVIGATION-ITEM') {
                    el.classList.add(variantClass);
                    el.classList.add(sizeClass);
                }
            });
            contentElements.forEach(el => {
                if (el.tagName === 'SPW-TABS-CONTENT') {
                    el.classList.add(variantClass);
                }
                else {
                    el.querySelectorAll('spw-tabs-content').forEach(content => {
                        if (isInThisComponent(content)) {
                            content.classList.add(variantClass);
                        }
                    });
                }
            });
            this.applyMaxWidthToChildren();
        });
    }
    get elementClass() {
        return {
            'spw-tabs': true,
            [`spw-tabs--${this.variant}`]: true,
        };
    }
    render() {
        return (h("div", { key: '2959fd77a92e360f81a53fed3af12e027b54d98d', class: this.elementClass }, h("slot", { key: 'acc8d785075b425baa8abea8a9fa8fc06a90db03', name: "navigation" }), h("slot", { key: 'e8078130f48eeba4d272eb3ba0a5fea9326081ff', name: "content" })));
    }
    static get is() { return "spw-tabs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-tabs.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-tabs.css"]
        };
    }
    static get properties() {
        return {
            "defaultActiveTab": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Onglet actif par d\u00E9faut"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-active-tab",
                "defaultValue": "'1'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'box'",
                    "resolved": "\"box\" | \"default\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Variante des onglets"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'default'"
            },
            "hasEllipsis": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte coup\u00E9 si trop long, affiche un tooltip si le contenu exc\u00E8de la max-width d\u00E9finie"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-ellipsis",
                "defaultValue": "false"
            },
            "maxWidth": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit la largeur maximale de l'onglet (en pixels)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-width"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'medium' | 'small'",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier la taille de l'onglet"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'small'"
            },
            "activeTab": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Onglet actuellement actif"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "active-tab",
                "defaultValue": "'1'"
            }
        };
    }
    static get events() {
        return [{
                "method": "tabChanged",
                "name": "tabChanged",
                "bubbles": false,
                "cancelable": true,
                "composed": false,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque l'onglet actif change"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "getSelectedTab": {
                "complexType": {
                    "signature": "() => Promise<string>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<string>"
                },
                "docs": {
                    "text": "R\u00E9cup\u00E8re l'onglet actuellement s\u00E9lectionn\u00E9",
                    "tags": [{
                            "name": "returns",
                            "text": "L'ID de l'onglet actif"
                        }]
                }
            },
            "setSelectedTab": {
                "complexType": {
                    "signature": "(tabId: string) => Promise<void>",
                    "parameters": [{
                            "name": "tabId",
                            "type": "string",
                            "docs": "L'ID de l'onglet \u00E0 s\u00E9lectionner"
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "D\u00E9finit l'onglet s\u00E9lectionn\u00E9",
                    "tags": [{
                            "name": "param",
                            "text": "tabId L'ID de l'onglet \u00E0 s\u00E9lectionner"
                        }, {
                            "name": "returns",
                            "text": undefined
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "activeTab",
                "methodName": "activeTabChanged"
            }, {
                "propName": "maxWidth",
                "methodName": "maxWidthChanged"
            }, {
                "propName": "hasEllipsis",
                "methodName": "hasEllipsisChanged"
            }];
    }
    static get listeners() {
        return [{
                "name": "tabSelected",
                "method": "handleTabSelected",
                "target": undefined,
                "capture": true,
                "passive": false
            }, {
                "name": "slotchange",
                "method": "slotChanged",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
