import { api, LightningElement } from "lwc";
import { toDxColor } from "dxUtils/css";

export type HeaderData = {
    backgroundColor?: string;
    iconColor?: string;
    iconSymbol?: string;
    iconSprite?: string;
    textColor?: string;
};

export default class CardStep extends LightningElement {
    @api headerIconColor = "";
    @api headerIconSymbol = "";
    @api headerIconSprite = "";
    @api headerBackgroundColor = "indigo-vibrant-20";
    @api headerTextColor = "white";
    @api showStepNumber = false;
    @api stepCount: number | undefined;
    @api stepFormatString: string | undefined;
    @api stepIndex: number | undefined;
    @api stepTitle: string | undefined;

    get stepDetails() {
        if (
            typeof this.stepIndex !== "number" ||
            typeof this.stepCount !== "number"
        ) {
            return "";
        }

        const displayStepNumber = this.stepIndex + 1;

        return this.stepFormatString
            ? this.stepFormatString
                  .replace("%d", displayStepNumber.toString())
                  .replace("%d", this.stepCount.toString())
            : `Step ${displayStepNumber} of ${this.stepCount}`;
    }

    get hasDefinedIcon() {
        return Boolean(this.headerIconSymbol && this.headerIconSprite);
    }

    connectedCallback() {
        this.template.host.style.setProperty(
            "--dx-c-card-step-header-background-color",
            toDxColor(this.headerBackgroundColor)
        );
        this.template.host.style.setProperty(
            "--dx-c-card-step-header-text-color",
            toDxColor(this.headerTextColor)
        );
    }
}