import { LightningElement, api } from "lwc";
import cx from "classnames";
import { LightningSlotElement, Link } from "typings/custom";
import { isSlotEmpty } from "dxUtils/slot";
import { toJson } from "dxUtils/normalizers";
import { track } from "dxUtils/analytics";

type OptionalLink = Link | null;

const LARGE = "large";
const MEDIUM = "medium";

const titleClasses = {
    [LARGE]: "dx-text-display-2",
    [MEDIUM]: "dx-text-display-4"
};

export default class GroupText extends LightningElement {
    @api header!: string;
    @api body?: string;
    @api owner?: string;
    @api dateTime?: string;
    @api dateText?: string;
    @api label?: string;
    @api titleAriaLevel: "1" | "2" = "2";
    @api size: "medium" | "large" = LARGE;

    @api
    set attributionLink(value: string | OptionalLink) {
        this._attributionLink = toJson(value);
    }
    get attributionLink() {
        return this._attributionLink;
    }

    @api
    set primaryLink(value: string | OptionalLink) {
        this._primaryLink = toJson(value);
    }
    get primaryLink() {
        return this._primaryLink;
    }

    @api
    set secondaryLink(value: string | OptionalLink) {
        this._secondaryLink = toJson(value);
    }
    get secondaryLink() {
        return this._secondaryLink;
    }

    @api
    set tertiaryLink(value: string | OptionalLink) {
        this._tertiaryLink = toJson(value);
    }
    get tertiaryLink() {
        return this._tertiaryLink;
    }

    private _attributionLink!: OptionalLink;
    private _primaryLink!: OptionalLink;
    private _secondaryLink!: OptionalLink;
    private _tertiaryLink!: OptionalLink;
    private isSlotEmpty: boolean = true;

    private get className() {
        return cx("text-group", this.isSlotEmpty && "hide-slot");
    }

    private get titleClassname() {
        return cx("title", titleClasses[this.size]);
    }

    private get hasButtonGroup(): boolean {
        return !!(this.primaryLink || this.secondaryLink || this.tertiaryLink);
    }

    private get hasSubtitle(): boolean {
        return !!(this.owner || this.attributionLink || this.dateTime);
    }

    private onSlotChange(e: LightningSlotElement): void {
        this.isSlotEmpty = isSlotEmpty(e);
    }

    private trackClick(event: any) {
        track(event.target!, "custEv_ctaButtonClick", {
            click_text: event.currentTarget.innerText,
            item_title: event.currentTarget.innerText,
            click_url: `${
                event.currentTarget.href.includes("http")
                    ? event.currentTarget.href
                    : window.location.origin + event.currentTarget.href
            }`,
            element_type: "button",
            element_title: this.header,
            content_category: "cta"
        });
    }
}