import React, { useMemo } from "react";
import { LocalLogicMap } from "@local-logic/maps";
import { useTracking } from "~/tracking";
import { useLocalContent } from "~/sdks/LocalContent/context";
import { getIdFromMarker } from "~/utils/map/getIdFromMarker";
import { iconsDeprecated as icons } from "~/components/PoiIcon";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
export function Markers() {
    const tracking = useTracking();
    const { isLoading, activeScore, activeCategoryData, selectedPoiSubcategory, isMarkersLoading, markersData, commuteData, handleMarkerClick, } = useLocalContent();
    const markers = useMemo(() => {
        if (selectedPoiSubcategory === null ||
            isMarkersLoading ||
            typeof markersData === "undefined" ||
            typeof markersData[selectedPoiSubcategory] === "undefined") {
            return [];
        }
        return markersData[selectedPoiSubcategory].map((marker) => ({
            id: getIdFromMarker(marker.lat, marker.lng, marker.name),
            latitude: marker.lat,
            longitude: marker.lng,
            name: marker.name,
            icon: icons[selectedPoiSubcategory],
        }));
    }, [selectedPoiSubcategory, isMarkersLoading, markersData]);
    const commuteMarkers = useMemo(() => {
        if (commuteData === null) {
            return [];
        }
        if (markers.find((marker) => marker.latitude === commuteData.destination.lat &&
            marker.longitude === commuteData.destination.lng)) {
            return [];
        }
        return [
            {
                id: "commute-destination",
                latitude: commuteData.destination.lat,
                longitude: commuteData.destination.lng,
                name: commuteData.label,
                icon: icons.other,
                defaultColor: true,
                disableClick: true,
            },
        ];
    }, [markers, commuteData]);
    const combinedMarkers = useMemo(() => [...markers, ...commuteMarkers], [markers, commuteMarkers]);
    /**
     * Handles clicking on a map marker. This includes both single markers and cluster markers.
     *
     * @param marker
     * @returns
     */
    const handleMapMarkerClick = (marker) => {
        handleMarkerClick(marker);
        if (!activeScore || !selectedPoiSubcategory || !marker) {
            return;
        }
        const eventAttributes = {
            score: activeScore,
            category: selectedPoiSubcategory,
        };
        if (marker.markers.length > 1) {
            eventAttributes.latitude = marker.latitude;
            eventAttributes.longitude = marker.longitude;
            eventAttributes.clusterSize = marker.markers.length;
            eventAttributes.isCluster = true;
        }
        else if (marker.markers.length === 1) {
            Object.entries(marker.markers[0]).forEach(([key, value]) => {
                if (typeof value === "boolean" ||
                    typeof value === "string" ||
                    typeof value === "number") {
                    // Remove sdk id before sending to tracking
                    if (key === "id") {
                        return;
                    }
                    eventAttributes[key] = value;
                }
            });
        }
        tracking.postEvent({
            eventType: TrackingPipelineEvents.MAP_POI_SELECTED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.MAP_POI_SELECTED,
            eventAttributes,
        });
    };
    return (React.createElement(LocalLogicMap.Markers, { isLoading: isLoading, markers: combinedMarkers, colors: activeCategoryData === null || activeCategoryData === void 0 ? void 0 : activeCategoryData.colors, clusterIcon: (selectedPoiSubcategory
            ? icons[selectedPoiSubcategory]
            : undefined), onClick: handleMapMarkerClick }));
}
//# sourceMappingURL=index.js.map