var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useMemo } from "react";
import "@local-logic/maps/style.css";
import { LocalLogicMap } from "@local-logic/maps";
import { Layers } from "./Layers";
import { Markers } from "./Markers";
import { Popup } from "./Popup";
import * as styles from "./styles";
import { getMapProviderConfig } from "~/utils/map/getMapProviderConfig";
import { DEFAULT_MIN_ZOOM, DEFAULT_MAX_ZOOM, MAP_PADDING, } from "~/sdks/NeighborhoodMap/constants";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
import { useNeighborhoodMap } from "~/sdks/NeighborhoodMap/context";
export function Map(_a) {
    var _b, _c, _d;
    var { children } = _a, rest = __rest(_a, ["children"]);
    const breakpoints = useResponsiveBreakpoints();
    const { locale, map, activeMarker, geography } = useNeighborhoodMap();
    const mapProviderConfig = useMemo(() => {
        var _a, _b, _c;
        return getMapProviderConfig((_a = map.mapProvider) === null || _a === void 0 ? void 0 : _a.name, (_b = map.mapProvider) === null || _b === void 0 ? void 0 : _b.key, (_c = map.mapProvider) === null || _c === void 0 ? void 0 : _c.theme);
    }, [(_b = map.mapProvider) === null || _b === void 0 ? void 0 : _b.name, (_c = map.mapProvider) === null || _c === void 0 ? void 0 : _c.key, (_d = map.mapProvider) === null || _d === void 0 ? void 0 : _d.theme]);
    const locationBoundary = useMemo(() => {
        if (typeof geography === "undefined" || !(geography === null || geography === void 0 ? void 0 : geography.geometry)) {
            return undefined;
        }
        const outerRing = geography.geometry.flatMap((polygon) => polygon[0] || []);
        if (!outerRing || outerRing.length === 0) {
            return undefined;
        }
        return outerRing.map((point) => [point[1], point[0]]);
    }, [geography]);
    return (React.createElement("div", Object.assign({ className: styles.container }, rest),
        typeof geography !== "undefined" && (React.createElement(LocalLogicMap.Root, { locale: locale, mapProvider: mapProviderConfig, mapPadding: MAP_PADDING[breakpoints.sm ? "mobile" : "desktop"], locationBoundary: locationBoundary, center: {
                latitude: geography === null || geography === void 0 ? void 0 : geography.centroid.lat,
                longitude: geography === null || geography === void 0 ? void 0 : geography.centroid.lng,
            }, zoom: map.zoom, minZoom: DEFAULT_MIN_ZOOM, maxZoom: DEFAULT_MAX_ZOOM, zoomPosition: breakpoints.sm ? "bottom-right" : undefined, pitch: map.pitch, bearing: map.bearing, cooperativeGestures: map.cooperativeGestures, activeMarker: activeMarker },
            React.createElement(LocalLogicMap.BaseMap, null,
                React.createElement(Layers, null),
                React.createElement(Markers, null),
                React.createElement(Popup, null)))),
        children));
}
//# sourceMappingURL=index.js.map