import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@local-logic/design-system";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { useLeadCapture } from "~/sdks/LeadCapture/context";
import { Select } from "~/components/Select";
import LifestyleReportImage from "~/assets/images/lifestyle-report.jpg";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LeadCapture/types";
export const DownloadCard = () => {
    const { t } = useTranslation("leadCapture");
    const tracking = useTracking();
    const [filterValue, setFilterValue] = React.useState(null);
    const { setSelectedReport, country } = useLeadCapture();
    useEffect(() => {
        if (country === "CAN") {
            setFilterValue("ni");
        }
    }, [country]);
    const handleOnClick = () => {
        setSelectedReport(filterValue);
        tracking.postEvent({
            eventType: TrackingPipelineEvents.REPORT_REQUESTED,
            eventAttributes: [
                { label: "reportType", data: filterValue },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.REPORT_REQUESTED,
            eventAttributes: { reportType: filterValue },
        });
    };
    const handleOnChange = (value) => {
        tracking.postEvent({
            eventType: TrackingPipelineEvents.REPORT_TYPE_SELECTED,
            eventAttributes: [{ label: "reportType", data: value }],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.REPORT_TYPE_SELECTED,
            eventAttributes: { reportType: value },
        });
        setFilterValue(value);
    };
    return (React.createElement("div", { className: styles.downloadCard },
        React.createElement("h4", { className: styles.title }, t("downloadCard.title")),
        React.createElement("p", { className: styles.description }, t("downloadCard.description")),
        React.createElement("div", { className: styles.filter, "data-country": country }, country !== "CAN" ? (React.createElement(Select, { name: "reportTypeFilter", items: [
                { value: "ni", label: t("downloadCard.select.niReport") },
                { value: "nmr", label: t("downloadCard.select.marketReport") },
                { value: "ni;nmr", label: t("downloadCard.select.both") },
            ], placeholder: t("downloadCard.select.default"), onChange: handleOnChange })) : (React.createElement("img", { "data-testid": "lifestyle-report-image", className: styles.image, src: LifestyleReportImage, alt: "Lifestyle Report" }))),
        React.createElement(Button, { variant: "primary", className: styles.cta, "data-testid": "download-card-cta", isDisabled: filterValue === null, onClick: handleOnClick }, country === "CAN" ? t("downloadCard.ctaCAN") : t("downloadCard.cta"))));
};
//# sourceMappingURL=index.js.map