import React from "react";
import { useTranslation } from "react-i18next";
import { Tag } from "@local-logic/design-system";
import * as CardList from "../CardList";
import * as styles from "./styles";
import { useTracking } from "~/tracking";
import { useNeighborhoodMatch } from "~/sdks/NeighborhoodMatch/context";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodMatch/types";
import { NoDataContent } from "~/components/NoDataContent";
import * as ScoreCardList from "~/components/ScoreCardList";
export function Neighborhoods() {
    const { t } = useTranslation(["neighborhoodMatch", "common"]);
    const tracking = useTracking();
    const { isFetched, isLoading, similarNeighborhoods, hasAffordabilityIndex, hideAffordabilityTags, } = useNeighborhoodMatch();
    const handleCardClickEvent = (position) => () => {
        tracking.postEvent({
            eventType: TrackingPipelineEvents.NEIGHBORHOOD_CARD_CLICKED,
            eventAttributes: [
                {
                    label: "position_in_set",
                    data: position,
                },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.NEIGHBORHOOD_CARD_CLICKED,
            eventAttributes: {
                ll_position_in_set: position,
            },
        });
    };
    if (isFetched && similarNeighborhoods.length === 0) {
        return React.createElement(NoDataContent, { text: t("noData") });
    }
    if (isLoading) {
        return (React.createElement(CardList.Root, { isLoading: true }, [0, 1, 2, 3].map((index) => (React.createElement(CardList.Card, { key: `similar-neighborhood-card-skeleton-${index}` },
            React.createElement("div", { className: styles.cardDataContent },
                React.createElement(CardList.Title, null, "\u00A0"),
                React.createElement(ScoreCardList.Root, null,
                    React.createElement("span", null))))))));
    }
    return (React.createElement(CardList.Root, { isLoading: isLoading }, similarNeighborhoods.map((neighborhood, index) => (React.createElement(CardList.Card, { key: `similar-neighborhood-card-${neighborhood.id}`, onClick: handleCardClickEvent(index), url: neighborhood.redirect_url, imageSrc: neighborhood.thumbnail_url, expanded: hasAffordabilityIndex },
        typeof neighborhood.affordabilityComparison !== "undefined" && (React.createElement("div", { className: styles.tag },
            React.createElement(Tag, { isTopLeftRounded: false, isTopRightRounded: false, isVisible: !hideAffordabilityTags &&
                    !!neighborhood.affordabilityComparison, variant: neighborhood.affordabilityComparison }, t(`tags.${neighborhood.affordabilityComparison}`)))),
        React.createElement("div", { className: styles.cardDataContent },
            React.createElement(CardList.Title, { "data-alt": neighborhood.name }, neighborhood.name),
            neighborhood.scores && (React.createElement(ScoreCardList.Root, null, Object.entries(neighborhood.scores).map(([key, value]) => value >= 0 && (React.createElement(ScoreCardList.Card, { key: `similar-neighborhood-${neighborhood.id}-scores-${key}`, title: t(`common:scores.${key}.title`), scoreKey: key, value: value })))))))))));
}
//# sourceMappingURL=index.js.map