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

export default class CardTrial extends LightningElement {
    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
    @api badgeSprite?: string = "salesforcebrand";
    @api badgeSymbol?: string;
    @api body!: string;
    @api buttonOneCta?: string;
    @api buttonOneHref?: string;
    @api buttonOneIcon?: string;
    @api buttonOneIconSize?: string = "large";
    @api buttonTwoCta?: string;
    @api buttonTwoHref?: string;
    @api buttonTwoIcon?: string;
    @api buttonTwoIconSize?: string = "large";
    @api hideCardDetails?: boolean = false;
    @api href!: string;
    @api imgSrc?: string;
    @api label!: string;
    @api recommended?: boolean = false;
    @api target?: string;
    @api terms!: string;
    @api header!: string;
    @api topText?: string;
    @api modalTitle?: string;

    @api twoColTitle?: string;
    @api twoColTarget?: string;
    @api twoColHref!: string;
    @api typeBadgeValue?: string;
    @api typeBadgeVariant?: string;
    @api typeBadgeColor?: string;
    @api typeBadgeSize?: string = "default";
    @api typeBadgeDark?: boolean = false;
    @api modalTypeBadgeValue?: string;
    @api modalTypeBadgeDark?: boolean;
    @api variant: TrialCardVariant = "primary";

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

    @api
    get modalDetails() {
        return this._modalDetails;
    }
    set modalDetails(value) {
        this._modalDetails = toJson(value);
    }

    get hasDetails() {
        return this.details?.length > 0 && !this.hideCardDetails;
    }

    get hasOneButton() {
        return !!(this.buttonOneCta && !this.buttonTwoCta);
    }

    get hasTwoButtons() {
        return !!(this.buttonOneCta && this.buttonTwoCta);
    }

    get hasButtons() {
        return !!(this.buttonOneCta || this.buttonTwoCta);
    }

    get buttonOneTarget() {
        return this.isExternalURL(this.buttonOneHref) ? "_blank" : null;
    }

    get isPrimary() {
        return this.variant === "primary";
    }

    get isSecondary() {
        return this.variant === "secondary";
    }

    private _details!: string[];
    private _modalDetails!: [{ title: string; subtitle: string }];
    private _modalOpen = false;

    private get className() {
        return cx(
            "card-trial",
            "dx-card-base",
            "dx-card-base_section-vertical",
            this.imgSrc && "has-image",
            this.recommended && "recommended-border"
        );
    }

    private get detailsClassName() {
        return cx("details", this.hasButtons && "details_top-margin");
    }

    private openModal(event: any) {
        this._modalOpen = true;
        this.handleCtaClick(event);
    }

    private closeModal() {
        this._modalOpen = false;
    }

    private handleCardClick(event: PointerEvent) {
        // card is clickable only if it doesn't contain buttons (for accessibility reasons)
        if (!this.hasButtons) {
            window.location.assign(this.href);
            if (this.href.includes("signup")) {
                this.handleSignUpClick(event);
            }
        }
    }

    private handleCtaClick(event: any) {
        track(document, "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",
            content_category: "cta"
        });
    }

    private handleSignUpClick(e: PointerEvent) {
        const payload = {
            click_text: this.label,
            element_title: "dx-button",
            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);
    }

    private isExternalURL(url: string | undefined): boolean {
        if (!url) {
            return false;
        }

        try {
            const value = new URL(url);
            return value.host !== window.location.host;
        } catch (e) {
            return false;
        }
    }
}