import React from "react";
import { LocalLogicMap, } from "@local-logic/maps";
import { useTracking } from "~/tracking";
import { useNeighborhoodMap } from "~/sdks/NeighborhoodMap/context";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/NeighborhoodMap/types";
import { ClusterPopupContent } from "~/components/map/ClusterPopupContent";
import { POIPopupContent } from "~/components/map/POIPopupContent";
export function Popup() {
    const tracking = useTracking();
    const { activePoiCategory, activeMarker, activeMarkerDetails, handleMarkerClick, showSchoolRatings, } = useNeighborhoodMap();
    /**
     * Handles selecting a marker from within a cluster popup.
     *
     * @param marker
     * @returns
     */
    const handleClusterMarkerSelected = (marker) => {
        handleMarkerClick({
            id: marker.id,
            latitude: marker.latitude,
            longitude: marker.longitude,
            markers: [marker],
        });
        if (!activePoiCategory) {
            return;
        }
        const eventAttributes = {
            category: activePoiCategory,
        };
        Object.entries(marker).forEach(([key, value]) => {
            if (typeof value === "boolean" ||
                typeof value === "string" ||
                typeof value === "number") {
                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,
        });
    };
    const handleLinkClick = (url) => {
        if (!activePoiCategory || !activeMarkerDetails) {
            return;
        }
        const eventAttributes = {
            category: activePoiCategory,
        };
        Object.entries(activeMarkerDetails).forEach(([key, value]) => {
            if (typeof value === "boolean" ||
                typeof value === "string" ||
                typeof value === "number") {
                eventAttributes[key] = value;
            }
        });
        eventAttributes.clickedUrl = url;
        tracking.postEvent({
            eventType: TrackingPipelineEvents.POI_LINK_CLICKED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.POI_LINK_CLICKED,
            eventAttributes,
        });
    };
    return (React.createElement(LocalLogicMap.Popup, { latitude: activeMarker === null || activeMarker === void 0 ? void 0 : activeMarker.latitude, longitude: activeMarker === null || activeMarker === void 0 ? void 0 : activeMarker.longitude, onClose: () => handleMarkerClick(undefined) },
        React.createElement(ClusterPopupContent, { activeMarker: activeMarker, onMarkerSelected: handleClusterMarkerSelected, onClose: handleMarkerClick }),
        React.createElement(POIPopupContent, { marker: activeMarkerDetails, poiCategory: activePoiCategory, onLocationLinkClick: handleLinkClick, onSchoolLinkClick: handleLinkClick, onClose: handleMarkerClick, showSchoolRatings: showSchoolRatings })));
}
//# sourceMappingURL=index.js.map