import { Host, h } from "@stencil/core";
export class SpwTimeline {
    constructor() {
        /** Orientation de la timeline */
        // @Prop() variant?: 'horizontal' | 'vertical' = 'vertical';
        /** Nombre d'items visibles initialement (0 = tous visibles) */
        this.visibleItems = 0;
        /** Texte du bouton "voir plus" */
        this.showMoreText = 'Voir plus';
        /** Texte du bouton "voir moins" */
        this.showLessText = 'Voir moins';
        /** État indiquant si tous les items sont affichés */
        this.showAll = false;
        this.handleToggle = () => {
            this.showAll = !this.showAll;
            this.updateItemsState();
        };
    }
    componentWillLoad() {
        this.updateItemsState();
    }
    slotChanged() {
        this.updateItemsState();
    }
    updateItemsState() {
        requestAnimationFrame(() => {
            const items = this.el.querySelectorAll('spw-timeline-item');
            items.forEach((item, index) => {
                item.setAttribute('variant', 'vertical');
                item.setAttribute('is-last', (index === items.length - 1).toString());
                if (this.visibleItems > 0 && !this.showAll) {
                    if (index >= this.visibleItems) {
                        item.style.display = 'none';
                    }
                    else {
                        item.style.display = '';
                    }
                }
                else {
                    item.style.display = '';
                }
            });
        });
    }
    get elementClass() {
        return {
            'spw-timeline': true,
            [`spw-timeline--vertical`]: true,
        };
    }
    shouldShowToggleButton() {
        const items = this.el.querySelectorAll('spw-timeline-item');
        return this.visibleItems > 0 && items.length > this.visibleItems;
    }
    render() {
        return (h(Host, { key: '5a946a9f72eaf694c95a6e389cd05e7c035d447e' }, h("div", { key: 'b77053be46bbefbe1e7b683d37e09b29697491ba', class: this.elementClass }, h("slot", { key: 'bef7bec9265481d21bd8bbb31ba7f4f6536685e1' })), this.shouldShowToggleButton() && (h("div", { key: 'e55bf4fcce24e65a7d4da053c3bb2c72da20b8cf', class: {
                'spw-timeline__toggle': true,
                'spw-timeline__toggle--more': !this.showAll,
                'spw-timeline__toggle--less': this.showAll,
            } }, h("span", { key: 'a04f13df12d839d923038a1472b54fb1057b2294', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
    }
    static get is() { return "spw-timeline"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-timeline.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-timeline.css"]
        };
    }
    static get properties() {
        return {
            "visibleItems": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Nombre d'items visibles initialement (0 = tous visibles)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "visible-items",
                "defaultValue": "0"
            },
            "showMoreText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du bouton \"voir plus\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-more-text",
                "defaultValue": "'Voir plus'"
            },
            "showLessText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du bouton \"voir moins\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-less-text",
                "defaultValue": "'Voir moins'"
            }
        };
    }
    static get states() {
        return {
            "showAll": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "slotChanged",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
