import { LightningElement, api } from "lwc";
import cx from "classnames";
import { toDxColor } from "dxUtils/css";
import {
    ButtonTextColor,
    CardNewsButtonType,
    CardNewsImagePlacement,
    CardNewsImageVerticalAlignment,
    CardNewsSize,
    CardNewsTextContainerSize
} from "typings/custom";
import { track } from "dxUtils/analytics";

export default class CardNews extends LightningElement {
    @api backgroundColor: string = "indigo-vibrant-40";
    @api header!: string;
    @api body!: string;
    @api buttonText?: string = "";
    @api buttonType!: CardNewsButtonType;
    @api color: string = "white";
    @api buttonColor?: ButtonTextColor = "dark";
    @api dark?: boolean = false;
    @api size?: CardNewsSize = "normal";
    @api href!: string;
    @api imgAlt?: string = "";
    @api imgSrc?: string | null = null;
    @api imgPlacement?: CardNewsImagePlacement = "top";
    @api imgVerticalAlign?: CardNewsImageVerticalAlignment | null = null;
    @api target?: string | null = null;
    @api textContainerWidth?: CardNewsTextContainerSize = "small";

    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(
            "dx-card-news",
            "dx-card-base",
            `dx-card-size-${this.size}`,
            this.dark && `is-dark`,
            this.imgSrc && `dx-card-news-img-placement-${this.imgPlacement}`
        );
    }

    private get hasLargeButton(): boolean {
        return this.buttonType === "large";
    }

    private get textContainerClassName(): string {
        return cx("text", this.textContainerWidth);
    }

    private get imgClassName(): string {
        return cx(
            this.imgVerticalAlign &&
                `dx-card-news-img-vertical-align-${this.imgVerticalAlign}`,
            this.textContainerWidth === "large" && `dx-card-news-img-small`,
            `dx-card-news-img-padding`
        );
    }

    private trackClick(e: Event) {
        const payload = {
            click_text: this.buttonText,
            click_url: this.href.includes("http")
                ? this.href
                : `${window.location.origin}${this.href}`,
            element_title: this.header,
            element_type: "link",
            content_category: "cta"
        };
        track(e.currentTarget!, "custEv_linkClick", payload);
        track(e.currentTarget!, "custEv_linkClick", payload);
    }
}