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

export default class CardTrial extends LightningElement {
    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
    @api badgeSprite?: string = "salesforcebrand";
    @api badgeSymbol?: string;
    @api body!: string;
    @api buttonCta?: string;
    @api buttonHref?: string;
    @api buttonIcon?: string;
    @api buttonIconSize?: string = "large";
    @api colTwoTitle!: string;
    @api href!: string;
    @api label!: string;
    @api target?: string;
    @api terms!: string;
    @api header!: string;
    @api typeBadgeValue?: string;
    @api typeBadgeDark?: boolean = false;

    @api
    get details() {
        return this._details;
    }
    set details(value) {
        this._details = toJson(value);
    }

    @api
    get colTwoDetails() {
        return this._colTwoDetails;
    }
    set colTwoDetails(value) {
        this._colTwoDetails = toJson(value);
    }

    private _details!: [{ title: string; subtitle: string }];
    private _colTwoDetails!: string[];
    private stickyCloseObserver!: IntersectionObserver;

    renderedCallback(): void {
        this.observeStickyClose();
    }

    disconnectedCallback(): void {
        this.stickyCloseObserver.disconnect();
    }

    private observeStickyClose() {
        const el = this.template.querySelector(".button-container");
        if (el && !this.stickyCloseObserver) {
            this.stickyCloseObserver = new IntersectionObserver(
                ([e]) => {
                    e.target.classList.toggle(
                        "is-sticky",
                        e.intersectionRatio < 1
                    );
                },
                { threshold: [0.99] }
            );
            this.stickyCloseObserver.observe(el);
        }
    }

    private onClickClose() {
        this.dispatchEvent(new CustomEvent("clickclose"));
    }

    private handleSignUpClick(e: PointerEvent) {
        if (this.href.includes("signup")) {
            const payload = {
                click_text: this.buttonCta,
                element_title: this.header,
                element_type: "card",
                click_url: `${window.location.origin}${this.href}`,
                content_category: "cta"
            };
            track(e.currentTarget!, "custEv_signupStart", payload);
            track(e.currentTarget!, "custEv_linkClick", payload);
        }
    }
}