import React from "react";
import { useTranslation, Trans } from "react-i18next";
import * as styles from "./styles";
import { LoadingSpinner } from "~/components/deprecated";
import { useTracking } from "~/tracking";
import { useStateManagerContext } from "~/context/stateManager";
import { useNeighborhoodFeatured } from "~/sdks/NeighborhoodFeatured/context";
import { AnalyticsEvents, TrackingPipelineEvents, } from "~/sdks/NeighborhoodFeatured/types";
import { getNeighborhoodURLFromSchema } from "~/utils/formatters/neighborhoodURLSchema";
import { NeighborhoodCard } from "~/components/NeighborhoodCard";
export const Content = () => {
    var _a, _b, _c, _d, _e;
    const { t } = useTranslation("neighborhoodFeatured");
    const tracking = useTracking();
    const { sdkState } = useStateManagerContext();
    const exploreGatewayURL = ((_a = sdkState.options) === null || _a === void 0 ? void 0 : _a.exploreShowcaseURL) || undefined;
    const urlSpacer = ((_b = sdkState.options) === null || _b === void 0 ? void 0 : _b.urlSchemaSpacer) || "-";
    const { neighborhoods, isFetched, isLoading } = useNeighborhoodFeatured();
    const singleNeighborhoodURLSchema = ((_c = sdkState.options) === null || _c === void 0 ? void 0 : _c.singleNeighborhoodURLSchema) || undefined;
    if (!(neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.featured) && ((_d = neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.favorites) === null || _d === void 0 ? void 0 : _d.length) === 0) {
        return null;
    }
    const handleExploreGateway = () => {
        var _a, _b;
        tracking.postEvent({
            eventType: TrackingPipelineEvents.EXPLORE_MORE_NEIGHBORHOODS_CLICKED,
            eventAttributes: [
                {
                    label: "externalId",
                    data: (_a = sdkState.globalOptions) === null || _a === void 0 ? void 0 : _a.externalId,
                },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.EXPLORE_MORE_NEIGHBORHOODS_CLICKED,
            eventAttributes: {
                ll_externalID: (_b = sdkState.globalOptions) === null || _b === void 0 ? void 0 : _b.externalId,
            },
        });
    };
    const handleNeighborhoodCardClick = (neighborhood, label) => () => {
        tracking.postEvent({
            eventType: TrackingPipelineEvents.NEIGHBORHOOD_CARD_CLICKED,
            eventAttributes: [
                {
                    label: "geogID",
                    data: neighborhood.geogId,
                },
                {
                    label: "name",
                    data: neighborhood.name,
                },
                {
                    label: "label",
                    data: label,
                },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.NEIGHBORHOOD_CARD_CLICKED,
            eventAttributes: {
                ll_geogID: neighborhood.geogId,
                ll_name: neighborhood.name,
                ll_label: label,
            },
        });
    };
    return (React.createElement(React.Fragment, null, !isFetched ? (React.createElement("div", { className: styles.loadingContent },
        React.createElement(LoadingSpinner, { image: true }))) : (React.createElement(React.Fragment, null, neighborhoods ? (React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.featured, "data-is-loading": isLoading }, (neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.featured) && (React.createElement("div", { onClick: handleNeighborhoodCardClick(neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.featured, "featured") },
            React.createElement(NeighborhoodCard, { key: neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.featured.geogId, isFeatured: true, neighborhood: neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.featured, href: singleNeighborhoodURLSchema &&
                    getNeighborhoodURLFromSchema(singleNeighborhoodURLSchema, neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.featured, urlSpacer) })))),
        React.createElement("div", { className: styles.favorites }, (_e = neighborhoods === null || neighborhoods === void 0 ? void 0 : neighborhoods.favorites) === null || _e === void 0 ? void 0 : _e.map((neighborhood, index) => (React.createElement("div", { className: styles.card, key: neighborhood.geogId, "data-is-loading": isLoading, onClick: handleNeighborhoodCardClick(neighborhood, `favorite_${index + 1}`) },
            React.createElement(NeighborhoodCard, { neighborhood: neighborhood, href: singleNeighborhoodURLSchema &&
                    getNeighborhoodURLFromSchema(singleNeighborhoodURLSchema, neighborhood, urlSpacer) }))))),
        exploreGatewayURL && (React.createElement("a", { onClick: handleExploreGateway, className: styles.button, href: exploreGatewayURL, target: "_parent", rel: "noreferrer" }, t(`exploreMoreNeighborhoods`))))) : (React.createElement("div", { className: styles.blankState },
        React.createElement(Trans, { i18nKey: "noData", t: t, components: {
                LinkToHub: (React.createElement("a", { target: "_blank", rel: "noopener noreferrer", href: import.meta.env.VITE_NEIGHBORHOOD_MANAGEMENT_URL })),
                bold: React.createElement("strong", null),
            } })))))));
};
//# sourceMappingURL=index.js.map