import { LightningElement, api } from "lwc";
import cx from "classnames";

import { AlertInfo } from "typings/custom";
import { toJson } from "dxUtils/normalizers";

export default class Alert extends LightningElement {
    _alertInfo: AlertInfo | null = null;
    _dismissible = false;
    _iconName = "";
    _iconSprite = "";
    _iconColor = "";
    @api control: "none" | "hideable" | "dismissible" = "none";
    @api type: "success" | "warning" | "danger" = "warning";
    @api variant: "base" | "accented" = "base";

    @api
    get alertInfo(): AlertInfo | null {
        return this._alertInfo;
    }
    set alertInfo(value) {
        this._alertInfo = toJson(value);
    }

    @api
    get iconColor(): string {
        return this._iconColor || this.variant === "base"
            ? "gray-10"
            : this.accentedIconColor;
    }
    set iconColor(value) {
        if (value) {
            this._iconColor = value;
        }
    }

    @api
    get iconName(): string {
        return this._iconName || this.type === "success"
            ? "check-circle"
            : "warning";
    }
    set iconName(value) {
        if (value) {
            this._iconName = value;
        }
    }

    @api
    get iconSprite(): string {
        return this._iconSprite || this.type === "success"
            ? "general"
            : "utility";
    }
    set iconSprite(value) {
        if (value) {
            this._iconSprite = value;
        }
    }

    get accentedIconColor() {
        const baseColor =
            this.type === "danger"
                ? "red"
                : this.type === "warning"
                ? "yellow"
                : "green";
        return `${baseColor}-vibrant-50`;
    }

    get dismissible(): boolean {
        return this.control === "dismissible";
    }

    get hideable(): boolean {
        return this.control === "hideable";
    }

    get alertTitle() {
        return this.alertInfo?.title;
    }

    get hideBodyText() {
        return this.isBodyHidden ? "Show" : "Hide";
    }

    get alertType() {
        return this.type || "warning";
    }

    get alertVariant() {
        return this.variant || "base";
    }

    get className() {
        return cx(
            "alert-base",
            "alert-container",
            `alert-variant-${this.alertVariant}`,
            `alert-type-${this.alertType}`
        );
    }

    get bodyClassName() {
        return cx(
            "alert-body",
            "dx-text-body-3",
            this.isBodyHidden && "alert-body-hidden"
        );
    }

    isBodyHidden = false;

    renderedCallback() {
        const phaseBodyContainer = this.template.querySelector(".alert-body");
        if (phaseBodyContainer && this.alertInfo) {
            // eslint-disable-next-line @lwc/lwc/no-inner-html
            phaseBodyContainer.innerHTML = this.alertInfo.body;
        }
    }

    onShowHide() {
        this.isBodyHidden = !this.isBodyHidden;
    }

    onDismiss() {
        this.dispatchEvent(
            new CustomEvent("dismissphase", {
                detail: {
                    alertInfo: this.alertInfo
                },
                composed: true,
                bubbles: true
            })
        );
    }
}