import { Host, h } from "@stencil/core";
export class SpwTimelineItem {
    constructor() {
        /** État de l'item */
        this.state = 'default';
        /** Indique si c'est le dernier item (géré automatiquement par spw-timeline) */
        this.isLast = 'false';
        /** Variant qui permet de définir la direction (géré automatiquement par spw-timeline) */
        this.variant = 'vertical';
        this.isDescriptionExpanded = false;
        this.showToggle = false;
        this.toggleDescription = () => {
            this.isDescriptionExpanded = !this.isDescriptionExpanded;
        };
    }
    get elementClass() {
        return {
            'spw-timeline-item': true,
            [`spw-timeline-item--${this.state}`]: true,
            [`spw-timeline-item--${this.variant}`]: true,
        };
    }
    renderLabel() {
        if (!this.label)
            return null;
        return (h("div", { class: {
                'spw-timeline-item__label': true,
                'spw-timeline-item__label--clickable': this.showToggle,
            }, onClick: this.showToggle ? this.toggleDescription : undefined }, h("span", { class: "spw-timeline-item__label-text" }, this.label), this.description && this.showToggle && h("spw-icon", { icon: this.isDescriptionExpanded ? 'fa-chevron-up' : 'fa-chevron-down', class: "spw-timeline-item__label-toggle" })));
    }
    componentDidLoad() {
        this.checkDescriptionHeight();
    }
    componentDidUpdate() {
        this.checkDescriptionHeight();
    }
    checkDescriptionHeight() {
        if (this.descriptionRef) {
            const currentDisplay = this.el.style.display;
            const wasHidden = currentDisplay === 'none';
            if (wasHidden) {
                this.el.style.display = 'block';
                this.el.style.visibility = 'hidden';
                this.el.style.position = 'absolute';
            }
            const lineHeight = parseFloat(getComputedStyle(this.descriptionRef).lineHeight);
            const height = this.descriptionRef.scrollHeight;
            this.showToggle = height > lineHeight * 1.2;
            if (wasHidden) {
                this.el.style.display = currentDisplay;
                this.el.style.visibility = '';
                this.el.style.position = '';
            }
        }
    }
    render() {
        const showConnector = this.isLast === 'false';
        return (h(Host, { key: '8565d6e9e06a4b6b013279dacc1793d4a12845e8' }, h("div", { key: '4fbeb2d6a3726a6f8c732ce2844c2273886f83cf', class: this.elementClass }, h("div", { key: '48f2968454c986150049d111673719706006f548', class: "spw-timeline-item__step" }, h("div", { key: 'f439a9ab261c8b4806090304f81e8b19de4ea07b', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '7d9c82d1df17e610a08c2634076d30678a9cbaaf', class: "spw-timeline-item__connector" })), h("div", { key: '518e6275ff058474b878dc61670a27d89f8b5017', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: '9d5aff451e136e7717887ba167c7ef85d2438b12', class: "spw-timeline-item__description-wrapper" }, h("div", { key: '783d931dbc3529a7c979b87f0a5abe945bc838c3', ref: el => (this.descriptionRef = el), class: {
                'spw-timeline-item__description': true,
                'spw-timeline-item__description--collapsed': !this.isDescriptionExpanded,
            } }, this.description))), h("slot", { key: 'b154ecfe1e73f18f175e8054896d68e733a8fe90' })))));
    }
    static get is() { return "spw-timeline-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-timeline-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-timeline-item.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label affich\u00E9 (titre de l'\u00E9v\u00E9nement)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Description affich\u00E9e sous le label"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "description"
            },
            "state": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'active'",
                    "resolved": "\"active\" | \"default\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9tat de l'item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "state",
                "defaultValue": "'default'"
            },
            "isLast": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Indique si c'est le dernier item (g\u00E9r\u00E9 automatiquement par spw-timeline)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-last",
                "defaultValue": "'false'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'vertical' | 'horizontal'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Variant qui permet de d\u00E9finir la direction (g\u00E9r\u00E9 automatiquement par spw-timeline)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'vertical'"
            }
        };
    }
    static get states() {
        return {
            "isDescriptionExpanded": {},
            "showToggle": {}
        };
    }
    static get elementRef() { return "el"; }
}
