import { LightningElement, api } from "lwc";
import cx from "classnames";
import { toDxColor } from "dxUtils/css";
import { track } from "dxUtils/analytics";

export const ANALYTICS_EVENT_NAME = "custEv_linkClick";

export default class CardCallout extends LightningElement {
    @api backgroundColor: string = "indigo-vibrant-40";
    @api color: string = "white";
    @api href!: string;
    @api label: string = "";
    @api target?: string;
    @api header!: string;

    private get style(): string {
        const background = `background-color: ${toDxColor(
            this.backgroundColor
        )};`;
        const color = `color: ${toDxColor(this.color)};`;
        return [background, color].join(" ");
    }

    private get className(): string {
        return cx(
            "card-callout",
            "dx-card-base",
            "dx-card-base_section-vertical"
        );
    }

    private sendGtm(e: PointerEvent) {
        track(e.currentTarget!, "custEv_linkClick", {
            click_text: this.header,
            click_url: `${window.location.origin}${this.href}`,
            element_title: this.header,
            element_type: "link",
            content_category: "cta"
        });
    }
}