import React from "react";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { ScoreComparison } from "~/sdks/LocalContent/components/ScoreComparison";
import { ScoreText } from "~/sdks/LocalContent/components/ScoreText";
import { ScorePoiList } from "~/sdks/LocalContent/components/ScorePoiList";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
import { Score } from "~/sdks/LocalContent/components/Score";
import { useTracking } from "~/tracking";
export function ScoreDetails() {
    var _a, _b, _c, _d, _e;
    const { isExpanded, isMarkersLoading, activeScore, activeScoreData, markersData, } = useRootElement();
    const tracking = useTracking();
    const handleOnPOISelected = (poi, category) => {
        if (activeScore === null) {
            return;
        }
        const eventAttributes = {
            score: activeScore,
            category,
            latitude: poi.lat,
            longitude: poi.lng,
            name: poi.name,
        };
        Object.entries(poi).forEach(([key, value]) => {
            if (["boolean", "string", "number"].includes(typeof value)) {
                if (key === "lat" || key === "lng" || key === "name") {
                    return;
                }
                eventAttributes[key] = value;
            }
        });
        tracking.postEvent({
            eventType: TrackingPipelineEvents.SIDEBAR_POI_SELECTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.SIDEBAR_POI_SELECTED,
            eventAttributes,
        });
    };
    return (React.createElement("div", { className: styles.container, "data-testid": "sidebar-score-details", "data-is-visible": isExpanded },
        React.createElement(Score, { scoreKey: activeScore, scoreValue: activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.value, backgroundColor: (_b = (_a = activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.categoryOptions) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.background, fillColor: (_d = (_c = activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.categoryOptions) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.fill, className: styles.score }),
        React.createElement(ScoreComparison, { scoreKey: activeScore, locationScoreValue: activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.value, comparedTo: (_e = activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.geographies) === null || _e === void 0 ? void 0 : _e.g30 }),
        React.createElement(ScoreText, { text: activeScoreData === null || activeScoreData === void 0 ? void 0 : activeScoreData.text }),
        React.createElement(ScorePoiList, { isLoading: isMarkersLoading, pois: markersData, scoreKey: activeScore, onPOISelected: handleOnPOISelected })));
}
//# sourceMappingURL=index.js.map