import { LightningElement, api } from "lwc";
import cx from "classnames";
import { track } from "dxUtils/analytics";
import { IconSprite, IconSymbol } from "typings/custom";
import { toDxColor } from "dxUtils/css";
import { toJson } from "dxUtils/normalizers";

export type WidgetConfig<T extends "icon-button" | "badge"> =
    T extends "icon-button"
        ? {
              backgroundColor?: string;
              color: string;
              iconAlt?: string;
              iconSprite?: IconSprite;
              iconSymbol: IconSymbol;
              type: "icon-button";
          }
        : {
              backgroundColor: string;
              color: string;
              text: string;
              type: "badge";
          };

const defaultWidgetConfig: WidgetConfig<"icon-button"> = {
    backgroundColor: "cloud-blue-vibrant-95",
    color: "blue-vibrant-40",
    iconAlt: "forward",
    iconSymbol: "forward",
    type: "icon-button"
};

export default class CardClickthrough<
    T extends "icon-button" | "badge"
> extends LightningElement {
    private _widgetConfig?: WidgetConfig<T>;

    @api body!: string;
    @api href?: string;
    @api imgAlt?: string = "";
    @api imgSrc?: string | null = null;
    @api label!: string;
    @api header!: string;
    @api target?: string | null = null;
    @api showMobileImg?: boolean = false;

    @api
    get widgetConfig() {
        return this._widgetConfig || (this.href ? defaultWidgetConfig : {});
    }
    set widgetConfig(jsonIsh: any) {
        this._widgetConfig = toJson(jsonIsh);
    }

    private get isWidgetBadge() {
        return Boolean(this.widgetConfig?.type === "badge");
    }

    private get isWidgetIconButton() {
        return Boolean(this.widgetConfig?.type === "icon-button");
    }

    private get badgeConfig() {
        return (this.widgetConfig as WidgetConfig<"badge">) || {};
    }

    private get badgeStyle() {
        let style = "";
        const { backgroundColor, color } = this.badgeConfig;
        if (backgroundColor) {
            style += `background-color: ${toDxColor(backgroundColor)};`;
        }
        if (color) {
            style += `color: ${toDxColor(color)};`;
        }
        return style;
    }

    private get badgeText() {
        return this.badgeConfig.text;
    }

    private get iconConfig() {
        return (this.widgetConfig as WidgetConfig<"icon-button">) || {};
    }

    private get iconAlt() {
        return this.iconConfig.iconAlt || "";
    }

    private get iconColor() {
        return this.iconConfig.color;
    }

    private get iconSprite() {
        return this.iconConfig.iconSprite || "utility";
    }

    private get iconStyle() {
        return this.iconConfig.backgroundColor
            ? `background-color: ${toDxColor(this.iconConfig.backgroundColor)}`
            : "";
    }

    private get iconSymbol() {
        return this.iconConfig.iconSymbol || "forward";
    }

    private get className(): string {
        return cx(
            "card",
            "dx-card-base",
            this.imgSrc && "has-image",
            this.showMobileImg && "show-mobile-image",
            !this.href && "not-clickable"
        );
    }

    handleCardClick(evt: Event) {
        if (!this.href) {
            evt.preventDefault();
        }
    }

    private handleLinkClick(event: PointerEvent) {
        if (!this.href) {
            return;
        }
        const payloadCardInfo = {
            click_text: this.header,
            element_title: this.header,
            click_url: this.href,
            element_type: "link",
            content_category: "cta"
        };
        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
    }
}