import React, { useMemo } from "react";
import { LocalLogicMap } from "@local-logic/maps";
import { useNeighborhoodMap } from "~/sdks/NeighborhoodMap/context";
const GEOGRAPHY_LAYER_COLOR = "#008491";
const SCHOOL_CATCHMENT_COLOR = "#9333ea";
export function Layers() {
    const { geography, activeMarkerDetails } = useNeighborhoodMap();
    const primaryColor = useMemo(() => getComputedStyle(document.documentElement).getPropertyValue("--ll-colors-primary-100") || GEOGRAPHY_LAYER_COLOR, []);
    const neighborhoodLayerSources = useMemo(() => {
        const sources = [];
        if (typeof (geography === null || geography === void 0 ? void 0 : geography.geometry) === "undefined" ||
            (Array.isArray(geography.geometry) && geography.geometry.length === 0)) {
            return undefined;
        }
        geography.geometry.forEach((geometry, index) => {
            sources.push({
                key: `neighborhood-geometry-${index}`,
                layer: [
                    {
                        type: "fill",
                        color: primaryColor,
                    },
                    {
                        type: "line",
                        color: primaryColor,
                    },
                ],
                geometry: [geometry],
            });
        });
        return sources;
    }, [geography, primaryColor]);
    const schoolLayerSources = useMemo(() => {
        var _a;
        const activeSchoolMarkerDetails = activeMarkerDetails;
        if (typeof (activeSchoolMarkerDetails === null || activeSchoolMarkerDetails === void 0 ? void 0 : activeSchoolMarkerDetails.catchments) === "undefined" ||
            ((_a = activeSchoolMarkerDetails.catchments) === null || _a === void 0 ? void 0 : _a.length) === 0) {
            return undefined;
        }
        const sources = [];
        activeSchoolMarkerDetails.catchments.forEach((catchment, catchmentIndex) => {
            if (Array.isArray(catchment.geometry) &&
                catchment.geometry.length > 0) {
                catchment.geometry.forEach((geometry, geomIndex) => {
                    sources.push({
                        key: `school-catchment-${catchmentIndex}-geom-${geomIndex}`,
                        layer: [
                            {
                                type: "fill",
                                color: SCHOOL_CATCHMENT_COLOR,
                            },
                            {
                                type: "line",
                                color: SCHOOL_CATCHMENT_COLOR,
                            },
                        ],
                        geometry: [geometry],
                    });
                });
            }
        });
        return sources;
    }, [activeMarkerDetails]);
    return (React.createElement(React.Fragment, null,
        React.createElement(LocalLogicMap.Layers, { sources: neighborhoodLayerSources }),
        React.createElement(LocalLogicMap.Layers, { sources: schoolLayerSources })));
}
//# sourceMappingURL=index.js.map