import { h } from "@stencil/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class Stepper {
    constructor() {
        this.activeStep = 1;
        this.indicatorPosition = 'left';
        this.showStepNumber = false;
        this.variant = 'default';
        this.shouldEmitEvent = true;
        this.emittedByClick = false;
    }
    onStepChange(event) {
        const steps = this.getSteps();
        const previousActiveStep = steps[event.detail.previousActiveStep - 1];
        if (previousActiveStep && !previousActiveStep.complete) {
            previousActiveStep.setAttribute('error', 'true');
        }
    }
    handleActiveStep(newStep, oldStep) {
        const steps = this.getSteps();
        if (!this.shouldEmitEvent) {
            this.shouldEmitEvent = true;
            return;
        }
        // Skipping until the enabled step is found 
        if (steps[newStep - 1]) {
            if (!steps[newStep - 1].disabled) {
                this.emitIfxChange(newStep, oldStep);
            }
            else {
                // If coming from higher step number to the lower step number
                if (newStep < oldStep) {
                    let i = newStep;
                    this.shouldEmitEvent = false;
                    while (i >= 1 && steps[i - 1].disabled)
                        i--;
                    // if all the steps are disabled no change.
                    if (i < 1) {
                        this.activeStep = oldStep;
                    }
                    else {
                        this.emitIfxChange(i, oldStep);
                        this.activeStep = i;
                    }
                }
                // If coming from lower step number to the higher step number
                else {
                    let i = newStep;
                    this.shouldEmitEvent = false;
                    while (i <= this.stepsCount && steps[i - 1].disabled)
                        i++;
                    if (i > this.stepsCount) {
                        this.activeStep = oldStep;
                    }
                    else {
                        this.emitIfxChange(i, oldStep);
                        this.activeStep = i;
                    }
                }
            }
        }
    }
    emitIfxChange(activeStep, previousActiveStep) {
        this.ifxChange.emit({ activeStep: activeStep,
            previousActiveStep: previousActiveStep,
            totalSteps: this.stepsCount,
            emittedByClick: this.emittedByClick
        });
        this.emittedByClick = false;
    }
    getSteps() {
        const steps = this.el.querySelectorAll('ifx-step');
        return steps;
    }
    addStepIdsToStepsAndCountSteps() {
        const steps = this.getSteps();
        steps[steps.length - 1].lastStep = true;
        for (let i = 0; i < steps.length; i++) {
            steps[i].stepId = i + 1;
        }
        this.stepsCount = steps.length;
    }
    setActiveStep(stepId, setByClick = false) {
        this.emittedByClick = setByClick;
        this.activeStep = stepId;
    }
    setStepsBeforeActiveToComplete() {
        const steps = this.getSteps();
        steps.forEach((step, stepId) => {
            if (stepId + 1 < this.activeStep)
                step.complete = true;
        });
    }
    syncIfxSteps() {
        const steps = this.getSteps();
        for (let i = 0; i < steps.length; i++) {
            const stepperState = {
                activeStep: this.activeStep,
                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'),
                showStepNumber: this.showStepNumber,
                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant),
                setActiveStep: this.setActiveStep.bind(this)
            };
            steps[i].stepperState = stepperState;
        }
    }
    setInitialActiveStep() {
        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));
    }
    componentWillLoad() {
        this.addStepIdsToStepsAndCountSteps();
        this.setInitialActiveStep();
        this.setStepsBeforeActiveToComplete();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-stepper', await framework);
        }
        this.syncIfxSteps();
    }
    componentWillUpdate() {
        this.syncIfxSteps();
    }
    render() {
        return (h("div", { key: 'b6ddc5830bc2c1a371411fa1ddeef157b940acd5', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
        /* Progress bar for compact variant. */
        (this.variant === 'compact') &&
            h("div", { key: '043992aa871a912d5f3326e2c8c263865d07c5b3', class: 'stepper-progress' }, h("div", { key: '901254c7f8f706e9541d79ecbbbfb0a37925dd73', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '7b2757662fb0acd26f47338fdbfce65a977f37ab', class: `stepper-wrapper` }, h("slot", { key: 'b4fd58e8b562c58c4837e5418e24739dc666f35a' }))));
    }
    ;
    componentDidRender() {
        /* Updating progress bar in compact version. */
        if (this.variant == 'compact') {
            const progressBar = this.el.shadowRoot.querySelector('.stepper-progress');
            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);
        }
    }
    static get is() { return "ifx-stepper"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["stepper.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["stepper.css"]
        };
    }
    static get properties() {
        return {
            "activeStep": {
                "type": "number",
                "attribute": "active-step",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1"
            },
            "indicatorPosition": {
                "type": "string",
                "attribute": "indicator-position",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'left'"
            },
            "showStepNumber": {
                "type": "boolean",
                "attribute": "show-step-number",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "variant": {
                "type": "string",
                "attribute": "variant",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'compact' | 'vertical'",
                    "resolved": "\"compact\" | \"default\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'default'"
            },
            "ariaLabel": {
                "type": "string",
                "attribute": "aria-label",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "ariaCurrent": {
                "type": "string",
                "attribute": "aria-current",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "stepsCount": {},
            "shouldEmitEvent": {},
            "emittedByClick": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxChange",
                "name": "ifxChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "activeStep",
                "methodName": "handleActiveStep"
            }];
    }
    static get listeners() {
        return [{
                "name": "ifxChange",
                "method": "onStepChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=stepper.js.map
