import { Host, h } from "@stencil/core";
import checkIcon from "../../assets/check-icon.svg";
import warningIcon from "../../assets/warning-icon-outline.svg";
import { isPropDefined } from "../../utils/helpers";
export class Step {
    constructor() {
        /**
         * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
         */
        this.current = false;
        /**
         * @internal Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The state of the step within the stepper.
         */
        this.type = "active";
    }
    typeChangeHandler() {
        if (this.variant === "compact" && this.type === "current") {
            this.current = true;
        }
        else {
            this.current = false;
        }
    }
    render() {
        var _a, _b;
        // ARIA LABEL
        let ariaLabel = "";
        if (this.type === "completed") {
            ariaLabel = ". Completed step";
        }
        else if (this.type === "disabled") {
            ariaLabel = ". Non-required step";
        }
        else if (this.status === "required") {
            ariaLabel = ". Required step";
        }
        else if (this.status === "optional") {
            ariaLabel = ". Optional step";
        }
        // STEP STATUS
        let stepStatus;
        if (this.status && isPropDefined(this.status)) {
            stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
        }
        // STEP TYPE
        let stepType;
        if (this.type === "disabled" || this.compactStepStyling === "disabled") {
            stepType = "Not required";
        }
        else if (this.compactStepStyling === "completed") {
            stepType = "Completed";
        }
        // STATUS ICON FOR COMPACT STEP
        let statusIcon;
        if (this.type === "completed" || this.compactStepStyling === "completed") {
            statusIcon = (h("span", { key: '8831990f0422a89e28d83c33bf98e6f5e47d09a6', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
        }
        else if (this.type === "disabled" ||
            this.compactStepStyling === "disabled") {
            statusIcon = (h("span", { key: 'aedd81eacbe9ca6a4e331142d09053926b00dcd4', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
        }
        // COMPACT STEP COMPONENT
        const compactStep = (h("div", { key: '384c84c08600c48982959a9a19a54e638bdd76a9', class: {
                ["step"]: true,
                ["current"]: !!this.current,
                [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
            } }, h("ic-loading-indicator", { key: 'fb3373a16a3519a77689395882b77b07f84d00b2', class: {
                "compact-step-progress-indicator": true,
                "not-required": this.type === "disabled" ||
                    this.compactStepStyling === "disabled",
            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: 'e404a8d7fd56af5a6c3b38e7dd146ccbf6c0a921', class: "heading-area" }, h("ic-typography", { key: 'e2d2d3a3b2e2d1080a500f06c11fd2b19305e733', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'a04253bd63d0e9cbc2ebd2ccc6c6cf1d684611b4', class: "info-line" }, h("ic-typography", { key: '35699c8fd101642bcedacbb0e636f5f5e72d87d0', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: '0bc9e891b17f66419150733982711999983197a1', class: "visually-hidden" }, " steps")), (this.subheading ||
            this.type === "completed" ||
            this.type === "disabled" ||
            (this.variant === "compact" &&
                !!this.compactStepStyling &&
                this.compactStepStyling !== "active") ||
            !!this.status) && (h("div", { key: 'ce2356ecbc86e3805ddf84d7fa785f2a1495ef60', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: 'f9ada98e6d45ff5dcd8784dbb24c4402b7bd378e', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
            ? this.subheading
            : this.type === "disabled" ||
                (this.variant === "compact" &&
                    this.compactStepStyling === "disabled") ||
                this.type === "completed" ||
                (this.variant === "compact" &&
                    this.compactStepStyling === "completed")
                ? stepType
                : this.status && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepHeading))))));
        // ICON FOR DEFAULT STEP
        let icon;
        if (this.type !== "completed") {
            icon = (h("ic-typography", { key: '5b3734765f9d5e5db8f0b2818ffd471817a96cc5', variant: "subtitle-small" }, h("span", { key: 'd4d3ffd87c95a0b98fce8a437a6afb3f4639993f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
        }
        else {
            icon = (h("div", { key: '42447f9ec070e7e284aecfd49983259650d9abd3', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '4c7469fba1cf544d1d48c209c25db0bcaca14309', class: "check-icon", innerHTML: checkIcon })));
        }
        // STEP CONNECT FOR DEFAULT STEP
        const partialBar = this.type === "current" && (h("div", { key: '800764f8ca21ac1118c77ed860a163b3103fe62e', class: "step-connect-inner" }));
        const finalStep = !this.lastStep && (h("div", { key: 'e5c0f38f7140800d60e5046d77d6cde34c5e7bd5', class: {
                ["step-connect"]: true,
                ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
            } }, partialBar));
        // DEFAULT STEP COMPONENT
        const defaultStep = (h("div", { key: 'cdfd23786b75a88fe1630318d8a1369a89090544', class: {
                ["step"]: true,
                [`${this.type}`]: true,
            } }, h("div", { key: 'c83625070a1ffe89fc53f66d55f06c994f868570', class: "step-top" }, h("div", { key: 'a6758050efffeb98522092fefa9b1261b3d9217b', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '3ecf8d32da66fe336b7c0540c47726d060e8eaf8', class: "heading-area" }, this.heading && (h("ic-typography", { key: '79557ec3d9a26be0fee2253a58c2f09132322017', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: 'f5a90f68ebc0721fec936541824ab79b415f566d', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
            ? this.subheading
            : stepStatus))))));
        return (h(Host, { key: '0cb6b6649c9af4565e5f663131b800a79b9b040d', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
                ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                [`ic-step-${this.variant}`]: true,
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
            } }, this.variant === "compact" ? compactStep : defaultStep));
    }
    static get is() { return "ic-step"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-step.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-step.css"]
        };
    }
    static get properties() {
        return {
            "compactStepStyling": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcStepTypes",
                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\" | undefined",
                    "references": {
                        "IcStepTypes": {
                            "location": "import",
                            "path": "./ic-step.types",
                            "id": "src/components/ic-step/ic-step.types.ts::IcStepTypes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If a compact stepper is being used, this sets the styling of the step."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "compact-step-styling",
                "reflect": false
            },
            "current": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, and a compact stepper  is being used, the current step will be the only step in view."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "current",
                "reflect": false,
                "defaultValue": "false"
            },
            "lastStep": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "last-step",
                "reflect": false
            },
            "lastStepNum": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "The step number of the final step. This is managed by ic-stepper."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "last-step-num",
                "reflect": false
            },
            "nextStepHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "The name of the next step. This is managed by ic-stepper."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "next-step-heading",
                "reflect": false
            },
            "progress": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "progress",
                "reflect": false
            },
            "stepNum": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "The step number, managed by ic-stepper."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "step-num",
                "reflect": false
            },
            "status": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcStepStatuses",
                    "resolved": "\"optional\" | \"required\" | undefined",
                    "references": {
                        "IcStepStatuses": {
                            "location": "import",
                            "path": "./ic-step.types",
                            "id": "src/components/ic-step/ic-step.types.ts::IcStepStatuses"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The status of the step. Use this prop to display a status message on the step if it is required or optional."
                },
                "getter": false,
                "setter": false,
                "attribute": "status",
                "reflect": false
            },
            "subheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status."
                },
                "getter": false,
                "setter": false,
                "attribute": "subheading",
                "reflect": false
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The title of the step within the stepper."
                },
                "getter": false,
                "setter": false,
                "attribute": "heading",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcStepVariants",
                    "resolved": "\"compact\" | \"default\"",
                    "references": {
                        "IcStepVariants": {
                            "location": "import",
                            "path": "./ic-step.types",
                            "id": "src/components/ic-step/ic-step.types.ts::IcStepVariants"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "The variant of the step. This is managed by ic-stepper."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcStepTypes",
                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\" | undefined",
                    "references": {
                        "IcStepTypes": {
                            "location": "import",
                            "path": "./ic-step.types",
                            "id": "src/components/ic-step/ic-step.types.ts::IcStepTypes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The state of the step within the stepper."
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "\"active\""
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "type",
                "methodName": "typeChangeHandler"
            }];
    }
}
//# sourceMappingURL=ic-step.js.map
