import { h } from "@stencil/core";
export class SpwTabsNavigation {
    constructor() {
        /** Définit si la navigation doit être verticale sur mobile (à utiliser avec le variant default) */
        this.isVerticalOnMobile = false;
        /** Si true, centre les items horizontalement */
        this.isCentered = false;
        this.showLeftArrow = false;
        this.showRightArrow = false;
        this.hasOverflow = false;
        this.scrollPercentage = 30;
        this.resizeObserver = null;
        this.mutationObserver = null;
        this.setupObservers = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.checkOverflow();
            });
            if (this.ulElement) {
                this.resizeObserver.observe(this.ulElement);
            }
            this.mutationObserver = new MutationObserver(() => {
                this.updateSlottedElementsObservation();
                setTimeout(() => this.checkOverflow(), 10);
            });
            this.mutationObserver.observe(this.hostElement, {
                childList: true,
                subtree: true,
            });
            this.updateSlottedElementsObservation();
        };
        this.updateSlottedElementsObservation = () => {
            if (!this.resizeObserver)
                return;
            const children = Array.from(this.hostElement.children);
            children.forEach(child => {
                this.resizeObserver.observe(child);
            });
        };
        this.cleanupObservers = () => {
            if (this.resizeObserver) {
                this.resizeObserver.disconnect();
                this.resizeObserver = null;
            }
            if (this.mutationObserver) {
                this.mutationObserver.disconnect();
                this.mutationObserver = null;
            }
        };
        this.checkOverflow = () => {
            if (!this.ulElement)
                return;
            const containerWidth = this.ulElement.clientWidth;
            const contentWidth = this.ulElement.scrollWidth;
            const scrollLeft = this.ulElement.scrollLeft;
            this.hasOverflow = contentWidth > containerWidth;
            this.showLeftArrow = this.hasOverflow && scrollLeft > 0;
            this.showRightArrow = this.hasOverflow && scrollLeft < contentWidth - containerWidth - 1;
        };
        this.scrollLeft = () => {
            if (!this.ulElement)
                return;
            const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;
            this.ulElement.scrollBy({
                left: -scrollAmount,
                behavior: 'smooth',
            });
        };
        this.scrollRight = () => {
            if (!this.ulElement)
                return;
            const scrollAmount = (this.ulElement.clientWidth * this.scrollPercentage) / 100;
            this.ulElement.scrollBy({
                left: scrollAmount,
                behavior: 'smooth',
            });
        };
        this.handleScroll = () => {
            this.checkOverflow();
        };
    }
    componentDidLoad() {
        this.checkOverflow();
        this.setupObservers();
    }
    disconnectedCallback() {
        this.cleanupObservers();
    }
    onWindowResize() {
        this.checkOverflow();
    }
    render() {
        const containerClass = {
            'spw-tabs-navigation-container': true,
            'spw-tabs-navigation-container--vertical-on-mobile': this.isVerticalOnMobile,
        };
        const navClass = {
            'spw-tabs-navigation': true,
            'spw-tabs-navigation--vertical-on-mobile': this.isVerticalOnMobile,
        };
        const listClass = {
            'spw-tabs-navigation__list': true,
            'spw-tabs-navigation__list--vertical-on-mobile': this.isVerticalOnMobile,
            'spw-tabs-navigation__list--centered': this.isCentered && !this.hasOverflow,
        };
        return (h("div", { key: '3fd64718f540089a26d5924bf901673aa1c60d98', class: containerClass }, this.showLeftArrow && (h("button", { key: '3a2e718bbe027d81413ee0163e8f9bd7ec6dcca7', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--left", onClick: this.scrollLeft, "aria-label": "Faire d\u00E9filer vers la gauche" }, h("spw-icon", { key: '2b7de5750220b9dd52504093ce8e32e98a96b746', icon: "fa-chevron-left" }))), h("nav", { key: 'd8de7158d18c5645ef5c3782f4e97f159a4201cd', class: navClass, "aria-label": this.accAriaLabel || 'Navigation' }, h("ul", { key: 'fef51eeb17cc6fffb2796413f6c1c45859c9a189', class: listClass, role: "tablist", ref: el => (this.ulElement = el), onScroll: this.handleScroll }, h("slot", { key: '30af1f7ad3d09a11e611f9b787879abf9e2dc11e' }))), this.showRightArrow && (h("button", { key: '0a49186841b1ac405e262e3ce5d8c8fd7234e33b', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--right", onClick: this.scrollRight, "aria-label": "Faire d\u00E9filer vers la droite" }, h("spw-icon", { key: '72fe87d0d45b119efad3cee4d9dec1eaebd4490f', icon: "fa-chevron-right" })))));
    }
    static get is() { return "spw-tabs-navigation"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-tabs-navigation.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-tabs-navigation.css"]
        };
    }
    static get properties() {
        return {
            "accAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Remplit l'attribut aria-label, utilis\u00E9 \u00E0 des fins d'accessibilit\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "acc-aria-label"
            },
            "isVerticalOnMobile": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit si la navigation doit \u00EAtre verticale sur mobile (\u00E0 utiliser avec le variant default)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-vertical-on-mobile",
                "defaultValue": "false"
            },
            "isCentered": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si true, centre les items horizontalement"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-centered",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "showLeftArrow": {},
            "showRightArrow": {},
            "hasOverflow": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "resize",
                "method": "onWindowResize",
                "target": "window",
                "capture": false,
                "passive": true
            }];
    }
}
