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

export default class MainContentHeader extends LightningElement {
    @api header!: string;
    @api subtitle?: string;
    @api body!: string;
    @api footNote?: string;
    @api footNoteImage?: string;
    @api footNoteImageAlt?: string;
    @api footNoteImageHeight?: string;
    @api footNoteImageWidth?: string;
    @api ctaLabel?: string;
    @api ctaLabelSecondary?: string;
    @api ctaHref!: string;
    @api ctaHrefSecondary?: string;
    @api imgSrc?: string;
    @api imgSrcMobile?: string;
    @api ctaTarget?: string | null = null;
    @api ctaTargetSecondary?: string | null = null;
    @api backgroundGradientColor?: string;
    @api backgroundGradientTarget?: string;
    @api backgroundImage?: string;
    @api backgroundGradientDark = false;
    @api hasSwoop = false;
    @api multipleImages = false;
    @api imgSrcOne?: string;
    @api imgSrcTwo?: string;
    @api centerImg?: boolean;

    public get desktopImgClass() {
        return cx("desktop", this.centerImg ? "center-img" : "top-img");
    }

    public get mobileImgClass() {
        return cx("mobile", this.centerImg ? "center-img" : "top-img");
    }

    private get style() {
        return cx(
            this.backgroundGradientColor &&
                `background: linear-gradient(180deg, var(--dx-g-${
                    this.backgroundGradientColor
                }) 0%, var(--dx-g-${
                    this.backgroundGradientTarget ||
                    this.backgroundGradientColor
                }) 100%);`,
            this.backgroundImage &&
                `background: #260F8F url('${this.backgroundImage}') no-repeat bottom; background-size: cover;`
        );
    }

    private get textStyle() {
        return cx(
            "text-container",
            this.backgroundGradientDark && "light-text"
        );
    }

    private get footNoteStyle() {
        return cx(this.backgroundGradientDark && "color: white;");
    }

    private onCtaClick(e: Event) {
        if (e.currentTarget) {
            track(e.currentTarget, "custEv_ctaButtonClick", {
                click_text: this.ctaLabel,
                click_url: this.ctaHref.includes("http")
                    ? this.ctaHref
                    : `${window.location.origin}${this.ctaHref}`,
                element_type: "button",
                element_title: this.header,
                content_category: "cta"
            });
            track(e.currentTarget!, "custEv_linkClick", {
                click_text: this.ctaLabel,
                element_title: this.header,
                click_url: this.ctaHref.includes("http")
                    ? this.ctaHref
                    : `${window.location.origin}${this.ctaHref}`,
                element_type: "link",
                content_category: "cta"
            });
        }
    }

    private onCtaClickSecondary(e: Event) {
        if (e.currentTarget) {
            track(e.currentTarget, "custEv_ctaButtonClick", {
                click_text: this.ctaLabelSecondary,
                click_url: this.ctaHrefSecondary!.includes("http")
                    ? this.ctaHrefSecondary
                    : `${window.location.origin}${this.ctaHrefSecondary}`,
                element_type: "button",
                element_title: this.header,
                content_category: "cta"
            });
            track(e.currentTarget!, "custEv_linkClick", {
                click_text: this.ctaLabelSecondary,
                element_title: this.header,
                click_url: this.ctaHrefSecondary!.includes("http")
                    ? this.ctaHrefSecondary
                    : `${window.location.origin}${this.ctaHrefSecondary}`,
                element_type: "link",
                content_category: "cta"
            });
        }
    }
}