import { Host, h } from "@stencil/core";
export class SpwWizard {
    constructor() {
        /** Étape actuellement active (index basé sur 1) */
        this.currentStep = 1;
        /** Orientation du wizard */
        this.variant = 'horizontal';
        /** Si `true`, les étapes suivantes sont également cliquables */
        this.canClickNextSteps = false;
    }
    componentWillLoad() {
        this.updateStepsState();
    }
    slotChanged() {
        this.updateStepsState();
    }
    /** Méthode publique pour définir une step au wizard */
    async setStep(step) {
        this.currentStep = step;
        this.updateStepsState();
        this.scrollToWizard();
    }
    handleStepClick(event) {
        const clickedStep = event.detail;
        if (clickedStep < this.currentStep || (this.canClickNextSteps && clickedStep > this.currentStep)) {
            this.currentStep = clickedStep;
            this.updateStepsState();
            this.stepClick.emit(clickedStep);
            this.scrollToWizard();
        }
    }
    scrollToWizard() {
        var _a;
        const host = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.host;
        const scrollTarget = (host === null || host === void 0 ? void 0 : host.parentElement) || this.el;
        if (scrollTarget) {
            scrollTarget.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
    updateStepsState() {
        requestAnimationFrame(() => {
            const items = this.el.querySelectorAll('spw-wizard-item');
            items.forEach((item, index) => {
                const stepNumber = index + 1;
                if (stepNumber > this.currentStep && item.hasAttribute('status')) {
                    item.removeAttribute('status');
                }
                if (!item.hasAttribute('status')) {
                    if (stepNumber < this.currentStep) {
                        item.setAttribute('state', 'completed');
                    }
                    else if (stepNumber === this.currentStep) {
                        item.setAttribute('state', 'active');
                    }
                    else {
                        item.setAttribute('state', 'inactive');
                    }
                }
                item.setAttribute('variant', this.variant);
                item.setAttribute('step-number', stepNumber.toString());
                item.setAttribute('is-last', (index === items.length - 1).toString());
                item.setAttribute('is-clickable', (stepNumber !== this.currentStep && (stepNumber < this.currentStep || this.canClickNextSteps)).toString());
                item.setAttribute('is-current', (stepNumber === this.currentStep).toString());
                item.setAttribute('is-before-current', (stepNumber < this.currentStep).toString());
                item.setAttribute('is-after-current', (stepNumber > this.currentStep).toString());
            });
        });
    }
    get elementClass() {
        return {
            'spw-wizard': true,
            [`spw-wizard--${this.variant}`]: true,
        };
    }
    render() {
        return (h(Host, { key: '178e7cccd1389ea3f3d606ae16384d6779d79f06' }, h("div", { key: '6eea80c6829912766df4f1ce8fa772e406381ecb', class: this.elementClass }, h("slot", { key: '7c315f82ec60d02e0cc4a0fe132a4ec6248f9d24' }))));
    }
    static get is() { return "spw-wizard"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-wizard.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-wizard.css"]
        };
    }
    static get properties() {
        return {
            "currentStep": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u00C9tape actuellement active (index bas\u00E9 sur 1)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-step",
                "defaultValue": "1"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'horizontal' | 'vertical'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Orientation du wizard"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'horizontal'"
            },
            "canClickNextSteps": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si `true`, les \u00E9tapes suivantes sont \u00E9galement cliquables"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "can-click-next-steps",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "stepClick",
                "name": "stepClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lors du clic sur une \u00E9tape ant\u00E9rieure"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setStep": {
                "complexType": {
                    "signature": "(step: number) => Promise<void>",
                    "parameters": [{
                            "name": "step",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "M\u00E9thode publique pour d\u00E9finir une step au wizard",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "slotChanged",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "wizardItemClick",
                "method": "handleStepClick",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
