import { Fragment, h, Host } from "@stencil/core";
import { _t } from "../../../text";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ProgressListItemHeadingLevel } from "./progress-list-item-heading-level.enum";
import { ProgressListItemVariation } from "./progress-list-item-variation.enum";
import { ProgressListItemStatus } from "./progress-list-item-status.enum";
import { ProgressListItemType } from "./progress-list-item-type.enum";
/**
 * @enums ProgressListItemStatus - progress-list-item-status.enum.ts
 * @enums ProgressListItemHeadingLevel - progress-list-item-heading-level.enum.ts
 * @enums ProgressbarVariation - progressbar-variation.enum.ts
 * @swedishName Förloppslista - enskilt steg
 */
export class ProgressListItem {
    constructor() {
        this.afHeading = undefined;
        this.afHeadingLevel = ProgressListItemHeadingLevel.H2;
        this.afStepStatus = ProgressListItemStatus.DONE;
        this.afStepStatusAriaLabel = undefined;
        this.afVariation = ProgressListItemVariation.PRIMARY;
        this.afAriaLabel = undefined;
        this.afType = ProgressListItemType.CIRCLE;
        this.afExpandable = false;
        this.afExpanded = false;
        this.afExpandText = '';
        this.afCollapseText = '';
        this.afId = randomIdGenerator('digi-progress-list-item');
        this.afIsLast = false;
    }
    renderExpandAndCollapseText() {
        if (this.afExpandText.trim().length > 0) {
            return (h("span", { class: "digi-progress-list-item__header--toggle--text" }, this.afExpanded ? this.afCollapseText : this.afExpandText));
        }
        return null;
    }
    renderHeading() {
        if (this.afExpandable) {
            return (h("button", { id: `${this.afId}-btn`, type: "button", class: "digi-progress-list-item__header--button", onClick: (e) => {
                    e.preventDefault();
                    this.afExpanded = !this.afExpanded;
                    this.afOnClick.emit(e);
                }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("span", { class: "visually-hidden" }, this.afAriaLabel ? this.afAriaLabel : this.afHeading, this.getAriaLabelForStep()), h("span", { "aria-hidden": "true", class: {
                    'digi-progress-list-item__header--heading--title': true,
                    'digi-progress-list-item__header--heading--title--expandable': true
                } }, this.afHeading), h("div", { class: {
                    'digi-progress-list-item__header--toggle': true,
                    'digi-progress-list-item__header--toggle--expanded': this.afExpanded
                } }, h("span", { class: "icon-slot" }, h("digi-icon-chevron-down", null)), this.renderExpandAndCollapseText())));
        }
        return (h(Fragment, null, h("span", { class: "visually-hidden" }, this.afAriaLabel ? this.afAriaLabel : this.afHeading, this.getAriaLabelForStep()), h("span", { class: "digi-progress-list-item__header--heading--title", "aria-hidden": "true" }, this.afHeading)));
    }
    renderStatusIcon() {
        if (this.afType === ProgressListItemType.ICON) {
            if (this.afStepStatus === ProgressListItemStatus.CURRENT) {
                return (h("digi-icon-arrow-right", { class: "digi-progress-list-item__indicator--icon--digi" }));
            }
            else if (this.afStepStatus == ProgressListItemStatus.DONE) {
                return (h("digi-icon-check", { class: "digi-progress-list-item__indicator--icon--digi" }));
            }
        }
        return null;
    }
    getAriaLabelForStep() {
        const preText = ', ';
        if (this.afStepStatusAriaLabel && this.afStepStatusAriaLabel.length > 0) {
            return preText + this.afStepStatusAriaLabel;
        }
        switch (this.afStepStatus) {
            case ProgressListItemStatus.DONE:
                return preText + _t.progressList.progressListItemDone;
            case ProgressListItemStatus.CURRENT:
                return preText + _t.progressList.progressListItemCurrent;
            case ProgressListItemStatus.UPCOMING:
                return preText + _t.progressList.progressListItemUpcoming;
            default:
                return '';
        }
    }
    render() {
        const ariaCurrent = this.afStepStatus == ProgressListItemStatus.CURRENT ? 'step' : 'false';
        return (h(Host, { key: '57ecc2f1093c598f73149f8da053ccde621df0ca', role: "listitem", "aria-current": ariaCurrent }, h("div", { key: 'b7b65dcec186b378966791bb0c79fd1d2be20649', class: {
                'digi-progress-list-item': true,
                'digi-progress-list-item--expanded': this.afExpandable && this.afExpanded,
                [`digi-progress-list-item--${this.afStepStatus}`]: true,
                'digi-progress-list-item--last': this.afIsLast,
                'digi-progress-list-item--primary': this.afVariation == ProgressListItemVariation.PRIMARY,
                'digi-progress-list-item--secondary': this.afVariation == ProgressListItemVariation.SECONDARY,
                'digi-progress-list-item--tertiary': this.afVariation == ProgressListItemVariation.TERTIARY
            } }, h("span", { key: '714a67a0baeebb76ce54bd76d847a1f3299bae77', class: "digi-progress-list-item__indicator" }, h("span", { key: '2b9ee2dd22aef4da1b8baa2c58a7e7eaa7714c52', class: {
                'digi-progress-list-item__indicator--circle': this.afType == ProgressListItemType.CIRCLE,
                'digi-progress-list-item__indicator--icon': this.afType == ProgressListItemType.ICON
            } }, this.renderStatusIcon()), h("span", { key: '9785e5d1d76f08e0d493d43f298324fecf0efaf5', class: "digi-progress-list-item__indicator--line" })), h("div", { key: '2d9f722647a7fa788f4295ba5d082c41b21b6bb5', class: {
                'digi-progress-list-item__wrapper': true,
                'digi-progress-list-item__wrapper--last': this.afIsLast
            } }, h("div", { key: 'faae4b3676177a146aaeda25f27952f6655cf5fe', class: "digi-progress-list-item__header" }, h(this.afHeadingLevel, { key: 'df658a483ff2b0904141916326acb31ff8cac523', class: "digi-progress-list-item__header--heading", id: `${this.afId}--heading` }, this.renderHeading())), h("div", { key: 'e1a5218be3972e8ee043b6583ebc13763fdb5ce5', class: {
                'digi-progress-list-item__content': true,
                'digi-progress-list-item__content--expandable': this.afExpandable,
                'digi-progress-list-item__content--hidden': this.afExpandable && !this.afExpanded,
                'digi-progress-list-item__content--visible': !this.afExpandable || (this.afExpandable && this.afExpanded)
            }, id: `${this.afId}-content` }, h("div", { key: '23eb9eaa9cd36e46ade2f6192377e539bfc09c9c' }, h("slot", { key: '15be5066f693d7865bbee3583560423e9b3f96c9' })))))));
    }
    static get is() { return "digi-progress-list-item"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["progress-list-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["progress-list-item.css"]
        };
    }
    static get properties() {
        return {
            "afHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The heading of text"
                        }],
                    "text": "Rubrikens text"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading",
                "reflect": false
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressListItemHeadingLevel",
                    "resolved": "ProgressListItemHeadingLevel.H1 | ProgressListItemHeadingLevel.H2 | ProgressListItemHeadingLevel.H3 | ProgressListItemHeadingLevel.H4 | ProgressListItemHeadingLevel.H5 | ProgressListItemHeadingLevel.H6",
                    "references": {
                        "ProgressListItemHeadingLevel": {
                            "location": "import",
                            "path": "./progress-list-item-heading-level.enum",
                            "id": "src/components/_progress/progress-list-item/progress-list-item-heading-level.enum.ts::ProgressListItemHeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level. Default is 'h2'"
                        }],
                    "text": "S\u00E4tter rubrikniv\u00E5. 'h2' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "ProgressListItemHeadingLevel.H2"
            },
            "afStepStatus": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressListItemStatus",
                    "resolved": "ProgressListItemStatus.CURRENT | ProgressListItemStatus.DONE | ProgressListItemStatus.UPCOMING",
                    "references": {
                        "ProgressListItemStatus": {
                            "location": "import",
                            "path": "./progress-list-item-status.enum",
                            "id": "src/components/_progress/progress-list-item/progress-list-item-status.enum.ts::ProgressListItemStatus"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set afStepStatus attribute. Defaults to 'upcoming'."
                        }],
                    "text": "S\u00E4tter attributet 'afStepStatus'. F\u00F6rvalt \u00E4r 'upcoming'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-status",
                "reflect": false,
                "defaultValue": "ProgressListItemStatus.DONE"
            },
            "afStepStatusAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set afStepStatusAriaLabel attribute. Defaults are \"status klar\", \"status aktuell\", \"status kommande\"'."
                        }],
                    "text": "S\u00E4tter attributet 'afStepStatusAriaLabel'. Blir till aria-label p\u00E5 status-ikonen/cirkeln. Default \u00E4r \"status klar\",\n\"status aktuell\" eller \"status kommande\" beroende p\u00E5 stegets status."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-status-aria-label",
                "reflect": false
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressListItemVariation",
                    "resolved": "ProgressListItemVariation.PRIMARY | ProgressListItemVariation.SECONDARY | ProgressListItemVariation.TERTIARY",
                    "references": {
                        "ProgressListItemVariation": {
                            "location": "import",
                            "path": "./progress-list-item-variation.enum",
                            "id": "src/components/_progress/progress-list-item/progress-list-item-variation.enum.ts::ProgressListItemVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation. Can be 'Primary', 'Secondary' or 'Tertiary'"
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'Primary', 'Secondary' eller 'Tertiary'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "ProgressListItemVariation.PRIMARY"
            },
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set aria-label attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-label'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressListItemType",
                    "resolved": "ProgressListItemType.CIRCLE | ProgressListItemType.ICON",
                    "references": {
                        "ProgressListItemType": {
                            "location": "import",
                            "path": "./progress-list-item-type.enum",
                            "id": "src/components/_progress/progress-list-item/progress-list-item-type.enum.ts::ProgressListItemType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set type. Can be 'Circle' or 'Icon'"
                        }],
                    "text": "S\u00E4tter typ. Kan vara 'Circle' eller 'Icon'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-type",
                "reflect": false,
                "defaultValue": "ProgressListItemType.CIRCLE"
            },
            "afExpandable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the state of the Header item to expanded or not. Default is false."
                        }],
                    "text": "S\u00E4tter l\u00E4ge p\u00E5 Rubriken om den till\u00E5ts vara expanderad eller ej. F\u00F6rvalt \u00E4r false."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-expandable",
                "reflect": false,
                "defaultValue": "false"
            },
            "afExpanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If the Header is allowed to be expandable, the mode is set to the Header whether it is expanded or not. Default is false."
                        }],
                    "text": "Om Rubriken till\u00E5ts att vara expanderarbar s\u00E5 s\u00E4tts l\u00E4ge p\u00E5 Rubriken om den \u00E4r expanderad eller ej. F\u00F6rvalt \u00E4r false."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-expanded",
                "reflect": false,
                "defaultValue": "false"
            },
            "afExpandText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets text on the expand button. Default is icon only and this field is empty."
                        }],
                    "text": "S\u00E4tter texten som visas p\u00E5 knappen som expanderar komponenten. F\u00F6rvalt \u00E4r endast ikon och detta f\u00E4lt tomt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-expand-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "afCollapseText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the text on the button that collapses the component. Default is icon only and this field is empty."
                        }],
                    "text": "S\u00E4tter texten som visas p\u00E5 knappen som kollapsar komponenten. F\u00F6rvalt \u00E4r endast ikon och detta f\u00E4lt tomt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-collapse-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "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-list-item')"
            },
            "afIsLast": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "checks if it is the last step"
                        }],
                    "text": "Kollar om det \u00E4r sista steget"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-is-last",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "afOnClick",
                "name": "afOnClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The button element's 'onclick' event."
                        }],
                    "text": "Buttonelementets 'onclick'-event."
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
