/* eslint-disable @typescript-eslint/no-explicit-any */
import { _t } from "../../../text";
import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ProgressIndicatorRole } from "./progress-indicator-role.enum";
import { ProgressIndicatorVariation } from "./progress-indicator-variation.enum";
/**
 * @enums ProgressIndicatorRole - progress-indicator-role.enum.ts
 * @enums ProgressIndicatorVariation - progress-indicator-variation.enum.ts
 * @swedishName Förloppsstegaren
 */
export class ProgressIndicator {
    constructor() {
        this.completedSteps = undefined;
        this.totalSteps = [];
        this.listItems = undefined;
        this.hasSlottedItems = undefined;
        this.radius = 42;
        this.stroke = 6;
        this.afCompletedSteps = undefined;
        this.afWarningStep = undefined;
        this.afErrorStep = undefined;
        this.afTotalSteps = undefined;
        this.afStepsSeparator = _t.of;
        this.afStepText = _t.step;
        this.afStepNextText = _t.progress.questions_next;
        this.afStepHeading = undefined;
        this.afStepNextLabel = undefined;
        this.afValidationLabel = undefined;
        this.afRole = ProgressIndicatorRole.STATUS;
        this.afVariation = ProgressIndicatorVariation.PRIMARY;
        this.afId = randomIdGenerator('digi-progress-indicator');
    }
    componentWillLoad() {
        this.changeTotalStepsHandler(this.afTotalSteps);
        this.getItems();
    }
    componentDidLoad() {
        this.getItems();
    }
    changeTotalStepsHandler(value) {
        const arr = [];
        let n = 0;
        while (n < value) {
            n++;
            arr.push(n);
        }
        this.totalSteps = arr;
    }
    changeCompletedStepsHandler(value) {
        this.completedSteps = value;
    }
    getItems(update) {
        let items;
        if (update) {
            items = this._observer.children;
        }
        else {
            items = this.hostElement.querySelectorAll('.digi-progress-indicator__slot li');
        }
        if (items.length > 0) {
            this.hasSlottedItems = true;
            this.listItems = [...items]
                .filter((element) => element.tagName.toLowerCase() === 'li')
                .map((element) => {
                const el = element;
                const checked = el.matches('.completed');
                return {
                    text: element.textContent,
                    checked: checked
                };
            });
        }
    }
    /**
     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
     */
    focusOnHeading() {
        this.headingElement.focus();
    }
    renderHeading() {
        return (h("h2", { class: "digi-progress-indicator__heading", tabIndex: -1, ref: (el) => (this.headingElement = el) }, this.afStepHeading));
    }
    get cssModifiers() {
        return {
            'digi-progress-indicator': true,
            'digi-progress-indicator--primary': this.afVariation === ProgressIndicatorVariation.PRIMARY,
            'digi-progress-indicator--secondary': this.afVariation === ProgressIndicatorVariation.SECONDARY,
            'digi-progress-indicator--linear': !this.hasSlottedItems
        };
    }
    get slottedContent() {
        return;
    }
    render() {
        return (h("div", { key: '52c54fb2b7327fae8d8703fef2562fc52ffa0735', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
                ? ProgressIndicatorRole.STATUS
                : null }, h("div", { key: 'e44b9f37c747ab92a241c9bddb6486000d56bc49' }, this.afStepNextLabel !== undefined ? (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), this.afCompletedSteps != this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
                visibility: this.afStepNextLabel !== null &&
                    this.afStepNextLabel !== undefined
                    ? 'visible'
                    : 'hidden'
            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps === this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
                visibility: 'hidden'
            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))) : (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), h("p", { class: "digi-progress-indicator__label" }, h("span", null, `${this.afStepText}`, " "), h("span", { class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), !this.hasSlottedItems ? (h("ol", { class: "digi-progress-indicator__list", "aria-hidden": "true" }, this.totalSteps.map((item, i) => {
            return (h("li", { class: {
                    'digi-progress-indicator__step': true,
                    'digi-progress-indicator__step--active': this.afCompletedSteps > i,
                    'digi-progress-indicator__step--current': this.afCompletedSteps === i + 1,
                    'digi-progress-indicator__step--warning': this.afWarningStep === i + 1,
                    'digi-progress-indicator__step--error': this.afErrorStep === i + 1
                } }, h("span", { class: "digi-progress-indicator__step-indicator" }, this.afVariation ===
                ProgressIndicatorVariation.SECONDARY &&
                this.afCompletedSteps > i + 1 && (h("digi-icon-check", { class: "digi-progress-indicator__icon" })), this.afWarningStep === i + 1 && (h("digi-icon-validation-warning", { class: "digi-progress-indicator__icon--warning" })), this.afErrorStep === i + 1 && (h("digi-icon-validation-error", { class: "digi-progress-indicator__icon--error" })), h("span", { class: "digi-progress-indicator__step-number" }, item))));
        }))) : (h("ol", { class: "digi-progress-indicator__list", "aria-hidden": "true" }, this.listItems.map((item, index) => {
            return (h("li", { class: {
                    'digi-progress-indicator__step': true,
                    'digi-progress-indicator__step--active': item.checked || this.afCompletedSteps === index + 1,
                    'digi-progress-indicator__step--current': this.afCompletedSteps === index + 1
                } }, h("span", { class: "digi-progress-indicator__step-indicator" }, this.afVariation ===
                ProgressIndicatorVariation.SECONDARY &&
                item.checked &&
                this.afCompletedSteps !== index + 1 && (h("digi-icon-check", { class: "digi-progress-indicator__icon" })), h("span", { class: "digi-progress-indicator__step-number" }, index + 1))));
        }))), this.afStepNextLabel !== undefined && (h("p", { key: '94877acf44973fd9c1dd69eebe96143192e144ec', class: "digi-progress-indicator__label" }, h("span", { key: 'fa23bac805567e3744c0910920a296000fe7ce8f' }, `${this.afStepText}`, " "), h("span", { key: 'f715c0c2a1f3e6dc77a3854cf0215bd51dfcf82b', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '208eec58f4c1787693c2123c681b4aec5f2689f2', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '433d08906124fe0117e4d987ca747402ed623d79', class: "digi-progress-indicator__icon--warning" }), h("span", { key: 'fd84762428b04d8bf900883ca0371dc80ef66082' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'fb2d2e24d489f63d247465be5ceb19bd18b30a1c', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '4706da063ccc85276d2a3ab84529d6ef34e2f0ae', class: "digi-progress-indicator__icon--error" }), h("span", { key: 'a58baa10d0f3595a97c5c8fb884a55d8054a136f' }, this.afValidationLabel))), h("div", { key: '19156fd81ed2e141751cc503ba8b1cd344d7e215', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: 'ef94eff54f79ab7489409a1d5f2b78621a2c5b44', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: '8a11b7e887d16eac8768e174be03af2dc3517d9c' })))));
    }
    static get is() { return "digi-progress-indicator"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["progress-indicator.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["progress-indicator.css"]
        };
    }
    static get properties() {
        return {
            "radius": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "radius",
                "reflect": false,
                "defaultValue": "42"
            },
            "stroke": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "stroke",
                "reflect": false,
                "defaultValue": "6"
            },
            "afCompletedSteps": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set finished amount of steps"
                        }],
                    "text": "S\u00E4tter antal f\u00E4rdiga steg"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-completed-steps",
                "reflect": false
            },
            "afWarningStep": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set a step where something requires additional actions"
                        }],
                    "text": "S\u00E4tter ett steg d\u00E4r det kr\u00E4vs ytterligare \u00E5tg\u00E4rder"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-warning-step",
                "reflect": false
            },
            "afErrorStep": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set a step that failed"
                        }],
                    "text": "S\u00E4tter ett steg d\u00E4r n\u00E5got gick fel"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-error-step",
                "reflect": false
            },
            "afTotalSteps": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set amount of total steps"
                        }],
                    "text": "S\u00E4tter totala antalet steg"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-total-steps",
                "reflect": false
            },
            "afStepsSeparator": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Separator text between current steps and total steps.\nDefault is \"av\", but can be changed e.g. for different language."
                        }],
                    "text": "Text emellan antal f\u00E4rdiga och totala antalet steg.\nSom standard anv\u00E4nds \"av\", men kan \u00E4ndras f\u00F6r exempelvis annat spr\u00E5k."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-steps-separator",
                "reflect": false,
                "defaultValue": "_t.of"
            },
            "afStepText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Text that shows \"Steg\" before the current step\nDefault is \"Steg\", but can be changed e.g. for different language."
                        }],
                    "text": "Text som visar \"Steg\" innan det antalet steg visas\nSom standard anv\u00E4nds \"Steg\", men kan \u00E4ndras f\u00F6r exempelvis annat spr\u00E5k."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-text",
                "reflect": false,
                "defaultValue": "_t.step"
            },
            "afStepNextText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Descriptive text of what comes in the next step."
                        }],
                    "text": "Beskrivande text om vad som kommer h\u00E4rn\u00E4st"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-next-text",
                "reflect": false,
                "defaultValue": "_t.progress.questions_next"
            },
            "afStepHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds a descriptive header for the progress-indicator"
                        }],
                    "text": "S\u00E4tter en beskrivande rubrik f\u00F6r f\u00F6rloppsm\u00E4taren"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-heading",
                "reflect": false
            },
            "afStepNextLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds a descriptive header for the progress-indicator"
                        }],
                    "text": "S\u00E4tter en beskrivande rubrik f\u00F6r f\u00F6rloppsm\u00E4taren"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-next-label",
                "reflect": false
            },
            "afValidationLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Descriptive text that tells the user something went wrong in the process"
                        }],
                    "text": "Beskrivande text om n\u00E5got g\u00E5r fel i processen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation-label",
                "reflect": false
            },
            "afRole": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressIndicatorRole",
                    "resolved": "ProgressIndicatorRole.NONE | ProgressIndicatorRole.STATUS",
                    "references": {
                        "ProgressIndicatorRole": {
                            "location": "import",
                            "path": "./progress-indicator-role.enum",
                            "id": "src/components/_progress/progress-indicator/progress-indicator-role.enum.ts::ProgressIndicatorRole"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set role attribute. Defaults to 'status'.\nIf you apply the progress-indicator both before and after a form,\nset only role 'status' on one of them to avoid screen readers to read the text twice"
                        }],
                    "text": "S\u00E4tter attributet 'role'. F\u00F6rvalt \u00E4r 'status'.\nAnv\u00E4nder du komponenten b\u00E5de f\u00F6re och efter ett formul\u00E4r s\u00E5\nange bara den ena som 'status' f\u00F6r att undvika att sk\u00E4rml\u00E4sare l\u00E4ser upp texten tv\u00E5 g\u00E5nger"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-role",
                "reflect": false,
                "defaultValue": "ProgressIndicatorRole.STATUS"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressIndicatorVariation",
                    "resolved": "ProgressIndicatorVariation.PRIMARY | ProgressIndicatorVariation.SECONDARY",
                    "references": {
                        "ProgressIndicatorVariation": {
                            "location": "import",
                            "path": "./progress-indicator-variation.enum",
                            "id": "src/components/_progress/progress-indicator/progress-indicator-variation.enum.ts::ProgressIndicatorVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation of progress-indicator. Can be 'primary' and 'secondary'."
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'primary' och 'secondary'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "ProgressIndicatorVariation.PRIMARY"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-progress-indicator')"
            }
        };
    }
    static get states() {
        return {
            "completedSteps": {},
            "totalSteps": {},
            "listItems": {},
            "hasSlottedItems": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afTotalSteps",
                "methodName": "changeTotalStepsHandler"
            }, {
                "propName": "afCompletedSteps",
                "methodName": "changeCompletedStepsHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "focus",
                "method": "focusOnHeading",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
