import React, { useState, useEffect } from "react";
import { twMerge } from "tailwind-merge";
import { useTranslation } from "react-i18next";
import * as ScoreSection from "../ScoreSection";
import * as styles from "./styles";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
import { useTracking } from "~/tracking";
import { useNeighborhoodCharacteristics } from "~/sdks/NeighborhoodCharacteristics/context";
import { TitleHeader } from "~/components/TitleHeader";
import { Attribution } from "~/components/Attribution";
import * as ScoreCardList from "~/components/ScoreCardList";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodCharacteristics/types";
import { sectionScores } from "~/sdks/NeighborhoodCharacteristics/constants";
export function Content() {
    const { t } = useTranslation(["neighborhoodCharacteristics", "common"]);
    const { lg: isDesktop } = useResponsiveBreakpoints();
    const tracking = useTracking();
    const { title, profilesData, scores, isLoading, locale, hideAttribution } = useNeighborhoodCharacteristics();
    const [scoreGroups, setScoreGroups] = useState({
        transport: {
            title: t("sections.transport.title"),
            description: "",
            scores: [],
        },
        services: {
            title: t("sections.services.title"),
            description: "",
            scores: [],
        },
        character: {
            title: t("sections.character.title"),
            description: "",
            scores: [],
        },
    });
    useEffect(() => {
        const newScoreGroups = Object.assign({}, scoreGroups);
        if (scores) {
            Object.keys(newScoreGroups).forEach((sectionKey) => {
                newScoreGroups[sectionKey].description =
                    (profilesData === null || profilesData === void 0 ? void 0 : profilesData.profiles[sectionKey]) || "";
                newScoreGroups[sectionKey].scores = sectionScores[sectionKey]
                    .map((value) => {
                    var _a, _b;
                    return ({
                        title: t(`common:scores.${value}.title`),
                        scoreKey: value,
                        value: Number((_a = scores[value]) === null || _a === void 0 ? void 0 : _a.value),
                        description: ((_b = scores[value]) === null || _b === void 0 ? void 0 : _b.text) || "",
                    });
                })
                    .filter((score) => score.value > 0)
                    .sort((a, b) => (a.value < b.value ? 1 : -1));
            });
        }
        setScoreGroups(newScoreGroups);
    }, [profilesData, scores]);
    const handleOnScoreClick = (category) => (score, isActive) => {
        const scoreState = isActive ? "enabled" : "disabled";
        tracking.postEvent({
            eventType: TrackingPipelineEvents.SCORE_CLICKED,
            eventAttributes: [
                {
                    label: "category",
                    data: category,
                },
                {
                    label: "score",
                    data: score,
                },
                {
                    label: "state",
                    data: scoreState,
                },
            ],
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.SCORE_CLICKED,
            eventAttributes: {
                ll_category: category,
                ll_score: score,
                ll_score_state: scoreState,
            },
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(TitleHeader, { title: typeof title === "string" || title === false ? title : t("title") }),
        React.createElement("div", { className: styles.content }, Object.entries(scoreGroups).map(([key, value]) => (React.createElement(ScoreSection.Root, { key: `score-section-1-${key}`, className: styles.root, isLoading: isLoading, "data-testid": "score-section-root-header" },
            React.createElement(ScoreSection.Title, null, value.title),
            React.createElement(ScoreSection.Description, null, value.description),
            !isDesktop && (React.createElement("div", { className: styles.mobileView },
                React.createElement(ScoreCardList.Root, null, value.scores.map((score) => (React.createElement(ScoreCardList.Card, { key: `score-section-mobile-${key}-${score.scoreKey}`, title: score.title, scoreKey: score.scoreKey, value: score.value, description: score.description, onClick: handleOnScoreClick(key) })))))))))),
        isDesktop && (React.createElement("div", { className: twMerge(styles.content, styles.desktopView) }, Object.entries(scoreGroups).map(([key, value]) => (React.createElement(ScoreSection.Root, { key: `score-section-2-${key}`, isLoading: isLoading, "data-testid": "score-section-root-desktop" },
            React.createElement(ScoreCardList.Root, null, value.scores.map((score) => (React.createElement(ScoreCardList.Card, { key: `score-section-desktop-${key}-${score.scoreKey}`, title: score.title, scoreKey: score.scoreKey, value: score.value, description: score.description, onClick: handleOnScoreClick(key) }))))))))),
        React.createElement(Attribution, { sdkName: "neighborhood-characteristics", locale: locale, isHidden: hideAttribution })));
}
//# sourceMappingURL=index.js.map