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

export default class FeaturesListHeader extends LightningElement {
    private _displayTitle: string | null = null;
    @api header!: string;
    @api subtitle?: string;
    @api ctaLabel!: string;
    @api ctaLabelSecondary?: string;
    @api ctaHref!: string;
    @api ctaHrefSecondary?: string;
    @api ctaTarget?: string | null = null;
    @api ctaTargetSecondary?: string | null = null;
    @api imgSrc!: string;
    @api imgSrcMobile!: string;
    @api backgroundDark: boolean = false;
    @api backgroundColor?: string;
    private _featuresList!: any;
    private _countriesList?: any;

    @api
    get featuresList() {
        return this._featuresList;
    }
    set featuresList(value: string) {
        this._featuresList = toJson(value);
    }

    @api
    get countriesList() {
        return this._countriesList;
    }
    set countriesList(value: string) {
        this._countriesList = toJson(value);
    }

    get renderCountriesList(): boolean {
        return Boolean(this.countriesList?.length);
    }

    // For use when displayed title will have embed HTML, i.e., is "rich text"
    @api
    get displayTitle() {
        return typeof this._displayTitle === "string"
            ? this._displayTitle
            : this.header;
    }
    set displayTitle(value: string | null) {
        this._displayTitle = value;
    }

    private get style() {
        return cx(
            this.backgroundColor &&
                `background-color: ${toDxColor(this.backgroundColor)};`
        );
    }

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

    private onCtaClick(e: Event) {
        if (e.currentTarget) {
            track(e.currentTarget, "custEv_ctaButtonClick", {
                click_text: this.ctaLabel,
                click_url: `${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: `${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: `${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: `${window.location.origin}${this.ctaHrefSecondary}`,
                element_type: "link",
                content_category: "cta"
            });
        }
    }
}