/* eslint-disable @typescript-eslint/no-explicit-any */
import { _t } from "../../../text";
import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ProgressbarRole } from "./progressbar-role.enum";
import { ProgressbarVariation } from "./progressbar-variation.enum";
/**
 * @private deprecated, but team still using it, remains available until we can safely remove it
 * @deprecated  Denna komponent kommer tas bort från Designsystemet i slutet av augusti 2024. Använd <digi-progress-indicator/> istället.
 * @enums ProgressbarRole - progressbar-role.enum.ts
 * @enums ProgressbarVariation - progressbar-variation.enum.ts
 * @swedishName Förloppsmätare
 */
export class Progressbar {
    constructor() {
        this.completedSteps = undefined;
        this.totalSteps = [];
        this.listItems = undefined;
        this.hasSlottedItems = undefined;
        this.afCompletedSteps = undefined;
        this.afTotalSteps = undefined;
        this.afStepsSeparator = _t.of;
        this.afStepsLabel = _t.progress.questions_answered.toLowerCase();
        this.afRole = ProgressbarRole.STATUS;
        this.afVariation = ProgressbarVariation.PRIMARY;
        this.afId = randomIdGenerator('digi-progressbar');
    }
    componentWillLoad() {
        this.changeTotalStepsHandler(this.afTotalSteps);
        this.getItems();
    }
    componentDidLoad() {
        if (process.env.NODE_ENV === 'development') {
            console.warn('Komponenten Progressbar är under avveckling. ' +
                'Vi rekommenderar komponent Förloppsstegaren. Meddelandet visas endast i utvecklingmiljön. ');
        }
        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-progressbar__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
                };
            });
        }
    }
    get cssModifiers() {
        return {
            'digi-progressbar': true,
            'digi-progressbar--primary': this.afVariation === ProgressbarVariation.PRIMARY,
            'digi-progressbar--secondary': this.afVariation === ProgressbarVariation.SECONDARY,
            'digi-progressbar--linear': !this.hasSlottedItems
        };
    }
    get slottedContent() {
        return;
    }
    render() {
        return (h("div", { key: 'be662f9844cfcedcace9aec2622d83b8e647e512', class: this.cssModifiers, role: this.afRole === ProgressbarRole.STATUS ? ProgressbarRole.STATUS : null }, h("p", { key: 'a862fbfa12409860dddfffaaf0778e8fdf7c3777', class: "digi-progressbar__label" }, this.afCompletedSteps, " ", this.afStepsSeparator, " ", this.afTotalSteps, ' ', this.afStepsLabel), !this.hasSlottedItems ? (h("ol", { class: "digi-progressbar__list", "aria-hidden": "true" }, this.totalSteps.map((item, i) => {
            return (h("li", { class: {
                    'digi-progressbar__step': true,
                    'digi-progressbar__step--active': this.afCompletedSteps > i,
                    'digi-progressbar__step--current': this.afCompletedSteps === i + 1
                } }, h("span", { class: "digi-progressbar__step-indicator" }, h("span", { class: "digi-progressbar__step-number" }, item))));
        }))) : (h("ol", { class: "digi-progressbar__list", "aria-hidden": "true" }, this.listItems.map((item, index) => {
            return (h("li", { class: {
                    'digi-progressbar__step': true,
                    'digi-progressbar__step--active': item.checked
                } }, h("span", { class: "digi-progressbar__step-indicator" }, h("span", { class: "digi-progressbar__step-number" }, index + 1))));
        }))), h("div", { key: '47a344d5dfb31c8427162a39ab76b669efa457d2', hidden: true, class: "digi-progressbar__slot" }, h("digi-util-mutation-observer", { key: 'e1d5673bd34438a17a8308b9c3673aadb1bc7250', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: 'd7cc4028d62df4e9b227cd11fdd1063ee3dcdb7a' })))));
    }
    static get is() { return "digi-progressbar"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["progressbar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["progressbar.css"]
        };
    }
    static get properties() {
        return {
            "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
            },
            "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"
            },
            "afStepsLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Descriptive text after step numbers."
                        }],
                    "text": "Beskrivande text efter siffrorna."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-steps-label",
                "reflect": false,
                "defaultValue": "_t.progress.questions_answered.toLowerCase()"
            },
            "afRole": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressbarRole",
                    "resolved": "ProgressbarRole.NONE | ProgressbarRole.STATUS",
                    "references": {
                        "ProgressbarRole": {
                            "location": "import",
                            "path": "./progressbar-role.enum",
                            "id": "src/components/_progress/progressbar/progressbar-role.enum.ts::ProgressbarRole"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set role attribute. Defaults to 'status'.\nIf you apply the progressbar 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": "ProgressbarRole.STATUS"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressbarVariation",
                    "resolved": "ProgressbarVariation.PRIMARY | ProgressbarVariation.SECONDARY",
                    "references": {
                        "ProgressbarVariation": {
                            "location": "import",
                            "path": "./progressbar-variation.enum",
                            "id": "src/components/_progress/progressbar/progressbar-variation.enum.ts::ProgressbarVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation of progressbar. Can be 'primary' and 'secondary'."
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'primary' och 'secondary'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "ProgressbarVariation.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-progressbar')"
            }
        };
    }
    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"
            }];
    }
}
