import { h } from '@stencil/core';
export class Stepper {
    constructor() {
        this.activeStep = 0;
        this.inactiveSteps = [];
    }
    componentDidLoad() {
        Array.from(this.host.querySelectorAll('materials-step')).forEach(step => {
            if (!step.showButtons) {
                step.showButtons = this.showButtons;
            }
        });
        this.calcIndexes();
    }
    async calcIndexes() {
        const activeSteps = Array.from(this.host.querySelectorAll('materials-step')).filter((_val, index) => this.inactiveSteps.indexOf(index) < 0);
        activeSteps.forEach((step, index) => {
            step.style.display = 'flex';
            step.index = index;
            step.active = (index === 0);
            if (step.index === (activeSteps.length - 1)) {
                step.isLast = true;
            }
        });
        const inactiveSteps = Array.from(this.host.querySelectorAll('materials-step')).filter((_val, index) => this.inactiveSteps.indexOf(index) > -1);
        inactiveSteps.forEach(step => step.style.display = 'none');
        this.adjustHeight();
    }
    async handleActiveStepUpdate() {
        const steps = Array.from(this.host.querySelectorAll('materials-step')).filter((_val, index) => this.inactiveSteps.indexOf(index) < 0);
        steps.forEach((step) => {
            if (step.index === this.activeStep) {
                this.currentStep = step;
            }
            step.active = (step.index === this.activeStep);
        });
    }
    switchStep(ev) {
        // On peut se rendre sur un step si tous les steps précédent sont valides ou optionels
        const steps = Array.from(this.host.querySelectorAll('materials-step')).filter((_val, index) => this.inactiveSteps.indexOf(index) < 0);
        const invalidPrevious = steps.find(e => !(e.status === 'valid' || e.optional) && e.index < ev.detail);
        if (!invalidPrevious) {
            this.activeStep = ev.detail;
        }
    }
    async openStep(index) {
        this.activeStep = index;
    }
    async nextStep() {
        const steps = Array.from(this.host.querySelectorAll('materials-step')).filter((_val, index) => this.inactiveSteps.indexOf(index) < 0);
        if (this.activeStep < (steps.length - 1)) {
            this.activeStep++;
        }
    }
    async previousStep() {
        if (this.activeStep > 0) {
            this.activeStep--;
        }
    }
    async adjustHeight() {
        const steps = Array.from(this.host.querySelectorAll('materials-step'));
        if (steps) {
            steps.forEach((step) => {
                step.adjustHeight();
            });
        }
    }
    render() {
        return (h("slot", null));
    }
    static get is() { return "materials-stepper"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["stepper.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["stepper.css"]
    }; }
    static get properties() { return {
        "showButtons": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-buttons",
            "reflect": false
        },
        "activeStep": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active-step",
            "reflect": false,
            "defaultValue": "0"
        },
        "inactiveSteps": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "number[]",
                "resolved": "number[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        }
    }; }
    static get methods() { return {
        "calcIndexes": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "openStep": {
            "complexType": {
                "signature": "(index: number) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "nextStep": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "previousStep": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "adjustHeight": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "host"; }
    static get watchers() { return [{
            "propName": "inactiveSteps",
            "methodName": "calcIndexes"
        }, {
            "propName": "activeStep",
            "methodName": "handleActiveStepUpdate"
        }]; }
    static get listeners() { return [{
            "name": "stepClick",
            "method": "switchStep",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "submitStep",
            "method": "nextStep",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "previousStep",
            "method": "previousStep",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
