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

export default class CardDocs extends LightningElement {
    @api body!: string;
    @api subText?: string | null = null;
    @api href!: string;
    @api imgAlt?: string = "";
    @api imgSrc?: string | null = null;
    @api label!: string;
    @api header!: string;
    @api target?: string | null = null;
    @api showMobileImg?: boolean = false;

    private isLinkHovered: boolean = false;

    private get className(): string {
        return cx(
            "card",
            "dx-card-base",
            this.imgSrc && "has-image",
            this.showMobileImg && "show-mobile-image"
        );
    }

    private onSlotChange(e: LightningSlotElement) {
        const payloadInnerButton = {
            element_type: "link",
            content_category: "card"
        };
        // @ts-ignore
        const slot = e.target;
        const elements = slot.assignedElements();
        elements.forEach((slotElement: any) => {
            slotElement?.addEventListener("click", (event: Event) => {
                track(event.currentTarget!, "custEv_cardClick", {
                    ...payloadInnerButton,
                    element_title: this.header,
                    click_text: slotElement.innerText,
                    click_url: `${window.location.origin}${slotElement.href}`
                });
                track(event.currentTarget!, "custEv_linkClick", {
                    ...payloadInnerButton,
                    element_title: this.header,
                    click_text: slotElement.innerText,
                    click_url: `${window.location.origin}${slotElement.href}`
                });
            });
        });
        stopPropagationOnSlotted(e);
    }

    private handleLinkClick(event: PointerEvent) {
        const payloadCardInfo = {
            click_text: this.header,
            element_title: this.header,
            click_url: `${window.location.origin}${this.href}`,
            element_type: "link",
            content_category: "cta"
        };
        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
    }

    private handleTextClick(event: PointerEvent) {
        const payloadCardTextInfo = {
            click_text: this.body,
            element_title: this.header,
            click_url: `${window.location.origin}${this.href}`,
            element_type: "tile",
            content_category: "cta"
        };
        track(event.currentTarget!, "custEv_ctaTile", payloadCardTextInfo);
        track(event.currentTarget!, "custEv_linkClick", payloadCardTextInfo);
    }
}