import React, { useMemo } from "react";
import { LocalLogicMap, } from "@local-logic/maps";
import { Commute } from "./Commute";
import { useTracking } from "~/tracking";
import { useLocalContent } from "~/sdks/LocalContent/context";
import { useCommute } from "~/sdks/LocalContent/hooks/useCommute";
import { TrackingPipelineEvents, AnalyticsEvents, } from "~/sdks/LocalContent/types";
import { DEFAULT_TRAVEL_MODE } from "~/sdks/LocalContent/constants";
import { ClusterPopupContent } from "~/components/map/ClusterPopupContent";
import { POIPopupContent } from "~/components/map/POIPopupContent";
export function Popup() {
    const tracking = useTracking();
    const { commuteOptions, distanceUnit, activeScore, centerMarker, location, locale, selectedPoiSubcategory, activeMarker, activeMarkerDetails, handleMarkerClick, handleCalculateCommute, showSchoolRatings, } = useLocalContent();
    const { data, isLoading } = useCommute({
        mode: commuteOptions.commuteType,
        locale,
        units: distanceUnit,
        origin: (location === null || location === void 0 ? void 0 : location.lat) && (location === null || location === void 0 ? void 0 : location.lng)
            ? {
                lat: location.lat,
                lng: location.lng,
            }
            : undefined,
        destination: typeof centerMarker !== "undefined" &&
            (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.lat) &&
            (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.lng)
            ? {
                lat: activeMarkerDetails.lat,
                lng: activeMarkerDetails.lng,
            }
            : undefined,
    });
    const commuteTime = useMemo(() => {
        if (!data || isLoading)
            return undefined;
        return data.duration;
    }, [data === null || data === void 0 ? void 0 : data.mode, data === null || data === void 0 ? void 0 : data.duration, isLoading]);
    /**
     * 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 (!activeScore || !selectedPoiSubcategory) {
            return;
        }
        const eventAttributes = {
            score: activeScore,
            category: selectedPoiSubcategory,
        };
        Object.entries(marker).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_FROM_CLUSTER,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.MAP_POI_SELECTED_FROM_CLUSTER,
            eventAttributes,
        });
    };
    const handleLinkClick = (url) => {
        if (!selectedPoiSubcategory || !activeMarkerDetails) {
            return;
        }
        const eventAttributes = {
            category: selectedPoiSubcategory,
        };
        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.MAP_POI_POPUP_LINK_CLICKED,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.MAP_POI_POPUP_LINK_CLICKED,
            eventAttributes,
        });
    };
    const handleOnViewRoute = () => {
        if (!activeMarkerDetails ||
            !activeScore ||
            !selectedPoiSubcategory ||
            !activeMarker) {
            return;
        }
        const requestOptions = {
            commuteType: commuteOptions.commuteType,
            label: (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.address) || (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.name),
            destination: {
                lat: (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.lat) || 0,
                lng: (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.lng) || 0,
            },
        };
        handleCalculateCommute(requestOptions);
        const eventAttributes = {
            score: activeScore,
            category: selectedPoiSubcategory,
            destinationLat: requestOptions.destination.lat,
            destinationLng: requestOptions.destination.lng,
            label: requestOptions.label,
            name: (activeMarkerDetails === null || activeMarkerDetails === void 0 ? void 0 : activeMarkerDetails.name) || "",
            mode: requestOptions.commuteType,
        };
        tracking.postEvent({
            eventType: TrackingPipelineEvents.MAP_POI_VIEW_ROUTE,
            eventAttributes: Object.entries(eventAttributes).map(([key, value]) => ({
                label: key,
                data: value,
            })),
        });
        tracking.trackAnalyticsEvent({
            eventName: AnalyticsEvents.MAP_POI_VIEW_ROUTE,
            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: selectedPoiSubcategory, onLocationLinkClick: handleLinkClick, onSchoolLinkClick: handleLinkClick, onClose: handleMarkerClick, showSchoolRatings: showSchoolRatings },
            React.createElement(Commute, { isLoading: isLoading, commuteType: commuteOptions.commuteType || DEFAULT_TRAVEL_MODE, durationInSeconds: commuteTime, onCalculateCommute: handleOnViewRoute }))));
}
//# sourceMappingURL=index.js.map