import { Host, h } from "@stencil/core";
import checkIcon from "../../assets/check-icon.svg";
import warningIcon from "../../assets/warning-icon-outline.svg";
import { isPropDefined, isSlotUsed } from "../../utils/helpers";
/**
 * @slot heading - Content will be rendered in place of the heading prop.
 */
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;
        /**
         * Words within the component that can be replaced to translate the component into a different language
         */
        this.icI18n = {
            next: "Next",
            step: "Step",
            steps: "Steps",
            of: "of",
            lastStep: "Last step",
            completed: "Completed",
            notRequired: "Not required",
            required: "Required",
            optional: "Optional",
        };
        /**
         * @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;
        const { compactStepStyling, current, heading, icI18n, lastStep, lastStepNum, nextStepHeading, progress, status, stepNum, subheading, theme, type, variant, } = this;
        // ARIA LABEL
        let ariaLabel = "";
        const hasHeading = (isPropDefined(heading) && heading !== "") ||
            isSlotUsed(this.el, "heading");
        if (type === "completed") {
            ariaLabel = `. ${icI18n.completed}`;
        }
        else if (type === "disabled") {
            ariaLabel = `. ${icI18n.notRequired}`;
        }
        else if (status === "required") {
            ariaLabel = `. ${icI18n.required}`;
        }
        else if (status === "optional") {
            ariaLabel = `. ${icI18n.optional}`;
        }
        // STEP STATUS
        let stepStatus;
        if (status && isPropDefined(status)) {
            stepStatus = status[0].toUpperCase() + status.slice(1);
        }
        // STEP TYPE
        let stepType;
        if (type === "disabled" || compactStepStyling === "disabled") {
            stepType = icI18n.notRequired;
        }
        else if (compactStepStyling === "completed") {
            stepType = icI18n.completed;
        }
        // STATUS ICON FOR COMPACT STEP
        let statusIcon;
        if (type === "completed" || compactStepStyling === "completed") {
            statusIcon = (h("span", { key: '3e6a788d03556019e87781e4e58306d0081da72a', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
        }
        else if (type === "disabled" || compactStepStyling === "disabled") {
            statusIcon = (h("span", { key: 'd3df77790e474794ac3a74cc99c98ec73a51530a', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
        }
        // COMPACT STEP COMPONENT
        const compactStep = (h("div", { key: '58e72e89eb93fd00ea4a76704c3744050eed25d2', class: {
                ["step"]: true,
                ["current"]: !!current,
                [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
            } }, h("ic-loading-indicator", { key: 'c7a6e8e70fe3e3a485a5b0c9353b6a7eaf5888d0', class: {
                "compact-step-progress-indicator": true,
                "not-required": type === "disabled" || compactStepStyling === "disabled",
            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '13209e08fa212f80ee2b6b2f04dd65cd3a36f461', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: '7c71fc4f8ce1b59c792c60f2d18cc464ebfc3b0f', class: "info-line" }, h("ic-typography", { key: '942f6be75ff898fccda479f36003b80dcdcad9ed', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: 'a3ced0ecff13af724c007fa1ca32f7396f114612', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
            type === "completed" ||
            type === "disabled" ||
            (this.variant === "compact" &&
                !!compactStepStyling &&
                compactStepStyling !== "active") ||
            !!status) && (h("div", { key: '04bb305951a0de96241c64e478b26e12afcd838a', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '3487444c46756faf3f1a88ce4cebd129cbd14d87', variant: "caption" }, subheading !== null && isPropDefined(subheading)
            ? subheading
            : type === "disabled" ||
                (variant === "compact" &&
                    compactStepStyling === "disabled") ||
                type === "completed" ||
                (variant === "compact" &&
                    compactStepStyling === "completed")
                ? stepType
                : status && stepStatus))))), lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.lastStep)) : (isPropDefined(nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.next, h("span", { class: "visually-hidden" }, " ", icI18n.step), ":", " ", this.nextStepHeading))))));
        // ICON FOR DEFAULT STEP
        let icon;
        if (type !== "completed") {
            icon = (h("ic-typography", { key: 'e25e3e2da7abbf17fcf8ede4dde3ce26010f68e0', variant: "subtitle-small" }, h("span", { key: 'ae4b4e77475d060dc7ce62796118fd03a0cbdb1f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
        }
        else {
            icon = (h("div", { key: '86b31c3ca79c025e185a5461c210be965b42dc2a', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '9854c6981f84ed0984fb98666a123de0c2a32048', class: "check-icon", innerHTML: checkIcon })));
        }
        // STEP CONNECT FOR DEFAULT STEP
        const partialBar = type === "current" && (h("div", { key: 'af4367f38115d9ee7f0e2112ab62ae7fdfe5b801', class: "step-connect-inner" }));
        const finalStep = !lastStep && (h("div", { key: '979da51621c8e026ab2b2d59d7ad83764e0330a7', 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: 'd91c5752a70b8062c91c7a2563229968ed832a2f', class: {
                ["step"]: true,
                [`${type}`]: true,
            } }, h("div", { key: 'df780502b324c87db8eb701d9b4c43e12e6d6b32', class: "step-top" }, h("div", { key: '7e2b4c244ecfe20c71f53d8f825938af39b62f71', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: 'e645cb62ca795ee554a1b580e6fdae6555bc410c', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (h("ic-typography", { key: '8498b50dd12915ac9e39ad329e35b0a585c77f46', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
            ? subheading
            : stepStatus))))));
        return (h(Host, { key: '356617f292b301db2b92d8c1d111fa32831705c1', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || 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-${variant}`]: true,
                [`ic-theme-${theme}`]: this.theme !== "inherit",
            } }, 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"
            },
            "icI18n": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IcStepI18n",
                    "resolved": "{ next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }",
                    "references": {
                        "IcStepI18n": {
                            "location": "import",
                            "path": "./ic-step.types",
                            "id": "src/components/ic-step/ic-step.types.ts::IcStepI18n"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Words within the component that can be replaced to translate the component into a different language"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n    next: \"Next\",\n    step: \"Step\",\n    steps: \"Steps\",\n    of: \"of\",\n    lastStep: \"Last step\",\n    completed: \"Completed\",\n    notRequired: \"Not required\",\n    required: \"Required\",\n    optional: \"Optional\",\n  }"
            },
            "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
