export class XStepper {
    constructor() {
        this.steps = [];
        this.activeStep = undefined;
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildSteps();
    }
    /**
     * Go to the element step and set active
     */
    async goToStep(step) {
        if (this.activeStep) {
            this.activeStep.removeAttribute('active');
        }
        setTimeout(() => {
            this.activeStep = step;
            step.setAttribute('active', 'true');
            this.onChangeStepEvent.emit(step);
        }, 10);
    }
    /**
     * Get the next enabled step index recursively
     */
    getNextEnabledIndex(currentIndex, direction) {
        const nextIndex = currentIndex + direction;
        if (nextIndex < 0 || nextIndex >= this.steps.length) {
            return currentIndex;
        }
        const nextStep = this.steps[nextIndex];
        if (nextStep.disabled) {
            return this.getNextEnabledIndex(nextIndex, direction);
        }
        return nextIndex;
    }
    /**
     * Update each step's position property based on first and last enabled steps
     */
    async updateStepPositions() {
        const enabledSteps = this.steps.filter(step => !step.disabled);
        if (!enabledSteps.length)
            return;
        const firstStep = enabledSteps[0];
        const lastStep = enabledSteps[enabledSteps.length - 1];
        this.steps.forEach(step => {
            if (step === firstStep) {
                step.position = 'first';
            }
            else if (step === lastStep) {
                step.position = 'last';
            }
            else if (!step.disabled) {
                step.position = 'middle';
            }
            else {
                step.position = undefined;
            }
        });
    }
    /**
     * Go to the next step
     */
    async nextStep() {
        const nextIndex = this.getNextEnabledIndex(this.activeStep.index, 1);
        if (nextIndex !== this.activeStep.index) {
            this.goToStep(this.steps[nextIndex]);
        }
    }
    /**
     * Go to the previous step
     */
    async prevStep() {
        const prevIndex = this.getNextEnabledIndex(this.activeStep.index, -1);
        if (prevIndex !== this.activeStep.index) {
            this.goToStep(this.steps[prevIndex]);
        }
    }
    /**
     * On component will load hook
     */
    componentWillLoad() {
        this.computeChildSteps();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (!this.steps.length) {
            return;
        }
        setTimeout(() => {
            if (!this.el.querySelectorAll('.step-active').length) {
                this.goToStep(this.steps[0]);
            }
        }, 10);
    }
    /**
     * Update the child steps and render the result
     */
    computeChildSteps() {
        this.steps = Array.from(this.el.children)
            .filter(step => step.nodeName.toLowerCase() === 'x-step')
            .map(el => el);
        this.activeStep = this.steps.find(step => step.active);
        this.steps.forEach((step, index) => {
            step.index = index;
        });
        this.updateStepPositions();
    }
    static get is() { return "x-stepper"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get states() {
        return {
            "steps": {},
            "activeStep": {}
        };
    }
    static get events() {
        return [{
                "method": "onChangeStepEvent",
                "name": "step-change",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On change step event"
                },
                "complexType": {
                    "original": "HTMLXStepElement",
                    "resolved": "HTMLXStepElement",
                    "references": {
                        "HTMLXStepElement": {
                            "location": "global",
                            "id": "global::HTMLXStepElement"
                        }
                    }
                }
            }, {
                "method": "onDone",
                "name": "done",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On stepper click in done button (last step)"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "goToStep": {
                "complexType": {
                    "signature": "(step: HTMLXStepElement) => Promise<void>",
                    "parameters": [{
                            "name": "step",
                            "type": "HTMLXStepElement",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLXStepElement": {
                            "location": "global",
                            "id": "global::HTMLXStepElement"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to the element step and set active",
                    "tags": []
                }
            },
            "updateStepPositions": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Update each step's position property based on first and last enabled steps",
                    "tags": []
                }
            },
            "nextStep": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to the next step",
                    "tags": []
                }
            },
            "prevStep": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to the previous step",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "handleSlotChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
