import { Host, h } from "@stencil/core";
export class SpwSkeleton {
    constructor() {
        /** Nombre de répétitions du skeleton (uniquement valable pour la variante lines) */
        this.blocks = 1;
        /** Type de skeleton à afficher */
        this.variant = 'lines';
    }
    renderLines() {
        return Array.from({ length: this.blocks }, (_, index) => {
            const isLast = index === this.blocks - 1;
            const isEven = index % 2 === 1;
            const isOdd = index % 2 === 0;
            const isOnly = this.blocks === 1;
            return (h("div", { class: {
                    'spw-skeleton__line': true,
                    'spw-skeleton__line--only': isOnly,
                    'spw-skeleton__line--last': !isOnly && isLast,
                    'spw-skeleton__line--even': !isLast && isEven,
                    'spw-skeleton__line--odd': !isLast && isOdd,
                } }));
        });
    }
    renderText() {
        return (h("div", { class: "spw-skeleton__text" }, h("spw-skeleton", { variant: "lines", blocks: 5 }), h("div", { class: "spw-skeleton__text-block" }), h("spw-skeleton", { variant: "lines", blocks: 2 })));
    }
    renderArticle() {
        return (h("div", { class: "spw-skeleton__article" }, h("div", { class: "spw-skeleton__article-image" }), h("spw-skeleton", { variant: "lines", blocks: 7 })));
    }
    renderTextButtons() {
        return (h("div", { class: "spw-skeleton__text-buttons" }, h("spw-skeleton", { variant: "lines", blocks: 3 }), h("div", { class: "spw-skeleton__buttons" }, h("div", { class: "spw-skeleton__button" }), h("div", { class: "spw-skeleton__button" }))));
    }
    renderVariant() {
        switch (this.variant) {
            case 'text':
                return this.renderText();
            case 'article':
                return this.renderArticle();
            case 'layout':
                return this.renderTextButtons();
            case 'lines':
            default:
                return this.renderLines();
        }
    }
    render() {
        return (h(Host, { key: 'f51453d4c09ee19f5b6d8d770fc106a37f4c7e90' }, h("div", { key: '5c1f100999ec9466dac114f16c23ec4d6e7eaadf', class: "spw-skeleton" }, this.renderVariant(), h("slot", { key: '5347334004f09f1584aa0384d3f65e1070e3c0c6' }))));
    }
    static get is() { return "spw-skeleton"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-skeleton.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-skeleton.css"]
        };
    }
    static get properties() {
        return {
            "blocks": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Nombre de r\u00E9p\u00E9titions du skeleton (uniquement valable pour la variante lines)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "blocks",
                "defaultValue": "1"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'lines' | 'text' | 'article' | 'layout'",
                    "resolved": "\"article\" | \"layout\" | \"lines\" | \"text\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type de skeleton \u00E0 afficher"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'lines'"
            }
        };
    }
}
