import React, { useMemo } from "react";
import { LocalLogicMap } from "@local-logic/maps";
import { useTracking } from "~/tracking";
import { useNeighborhoodMap } from "~/sdks/NeighborhoodMap/context";
import { getIdFromMarker } from "~/utils/map/getIdFromMarker";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodMap/types";
import { icons as poiIcons } from "~/components/PoiIcon";
export function Markers() {
    const tracking = useTracking();
    const { isLoading, activePoiCategory, markersData, handleMarkerClick } = useNeighborhoodMap();
    const icon = useMemo(() => {
        if (typeof activePoiCategory === "undefined") {
            return undefined;
        }
        return poiIcons[activePoiCategory];
    }, [activePoiCategory]);
    const mapMarkers = useMemo(() => {
        if (typeof activePoiCategory === "undefined") {
            return [];
        }
        // Filter out duplicate markers by ID
        // This is because we combine multiple data sources that may have overlapping POIs
        return Array.from((markersData || [])
            .map((marker) => ({
            id: getIdFromMarker(marker.lat, marker.lng, marker.name),
            latitude: marker.lat,
            longitude: marker.lng,
            name: marker.name,
            icon,
        }))
            .reduce((acc, marker) => {
            acc.set(marker.id, marker);
            return acc;
        }, new Map())
            .values());
    }, [markersData, icon, activePoiCategory]);
    /**
     * Handles clicking on a map marker. This includes both single markers and cluster markers.
     *
     * @param marker
     * @returns
     */
    const handleMapMarkerClick = (marker) => {
        handleMarkerClick(marker);
        if (!activePoiCategory || !marker) {
            return;
        }
        const eventAttributes = {
            category: activePoiCategory,
        };
        if (marker.markers.length > 1) {
            eventAttributes.isCluster = true;
            eventAttributes.clusterSize = marker.markers.length;
            eventAttributes.lat = marker.latitude;
            eventAttributes.lng = marker.longitude;
        }
        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.POI_CLICKED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.POI_CLICKED,
            eventAttributes,
        });
    };
    return (React.createElement(LocalLogicMap.Markers, { isLoading: isLoading, markers: mapMarkers, clusterIcon: icon, onClick: handleMapMarkerClick }));
}
//# sourceMappingURL=index.js.map