import { h, Host } from "@stencil/core";
export class SpwScrolltop {
    constructor() {
        /** Seuil de scroll en px avant d'afficher le bouton */
        this.threshold = 300;
        /** Si true, masque le bouton en mobile */
        this.hideOnMobile = false;
        /** Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */
        this.accAriaLabel = 'Retour en haut de page';
        /** Si true, utilise window comme contexte de scroll (sinon détecte le parent scrollable) */
        this.useWindow = true;
        /** État interne pour suivre la visibilité du bouton */
        this.isVisible = false;
        this.scrollContainer = null;
        this.handleScroll = () => {
            this.isVisible = this.getScrollTop() > this.threshold;
        };
        this.scrollToTop = () => {
            if (this.scrollContainer === window) {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth',
                });
            }
            else {
                this.scrollContainer.scrollTo({
                    top: 0,
                    behavior: 'smooth',
                });
            }
        };
    }
    getScrollableParent(element) {
        let parent = element.parentElement;
        while (parent) {
            const style = getComputedStyle(parent);
            const overflowY = style.overflowY;
            const isScrollable = overflowY === 'auto' || overflowY === 'scroll';
            if (isScrollable && parent.scrollHeight > parent.clientHeight) {
                return parent;
            }
            parent = parent.parentElement;
        }
        return null;
    }
    getScrollTop() {
        if (this.scrollContainer === window) {
            return window.scrollY;
        }
        return this.scrollContainer.scrollTop;
    }
    connectedCallback() {
        requestAnimationFrame(() => {
            if (this.useWindow) {
                this.scrollContainer = window;
            }
            else {
                this.scrollContainer = this.getScrollableParent(this.el) || window;
            }
            this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
            this.handleScroll();
        });
    }
    disconnectedCallback() {
        if (this.scrollContainer) {
            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
        }
    }
    get hostClass() {
        return {
            'spw-scrolltop--visible': this.isVisible,
            'spw-scrolltop--hide-mobile': this.hideOnMobile,
        };
    }
    render() {
        return (h(Host, { key: 'a9133326637d4aa8f58f2970407dbd59ea168791', class: this.hostClass }, h("spw-button", { key: '13f119dd0ae45ac9f50ec52020b4555405931fa4', "is-icon-only": true, icon: "fa-chevron-up", variant: "primary", size: "medium", "acc-aria-label": this.accAriaLabel, onClick: this.scrollToTop })));
    }
    static get is() { return "spw-scrolltop"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-scrolltop.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-scrolltop.css"]
        };
    }
    static get properties() {
        return {
            "threshold": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Seuil de scroll en px avant d'afficher le bouton"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "threshold",
                "defaultValue": "300"
            },
            "hideOnMobile": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si true, masque le bouton en mobile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-on-mobile",
                "defaultValue": "false"
            },
            "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",
                "defaultValue": "'Retour en haut de page'"
            },
            "useWindow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si true, utilise window comme contexte de scroll (sinon d\u00E9tecte le parent scrollable)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "use-window",
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "isVisible": {}
        };
    }
    static get elementRef() { return "el"; }
}
