import { Layer, Source } from "react-map-gl";
import { selectedRegionLayer } from "./layers-config";
import { usePendingPointsFilters } from "../../stores/usePendingPointsFilters";
import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
import { useWorkingPointsFilters } from "../../stores/useWorkingPointsFilters";
import { useMode } from "../../stores/useMode";
import { MODES } from "../../config";

const SelectedRegionLayer = ({ data }) => {
  return (
    <Source id="selected-region" type="geojson" data={data}>
      <Layer {...selectedRegionLayer} />
    </Source>
  );
};

export const SelectedRegion = () => {
  const {
    filters: { region: pendingRegion },
  } = usePendingPointsFilters();
  const {
    filters: { region: onApprovalRegion },
  } = useOnApprovalPointsFilters();
  const {
    filters: { region: workingRegion },
  } = useWorkingPointsFilters();

  const { mode } = useMode();

  const shouldRenderPendingRegion =
    mode === MODES.PENDING && pendingRegion?.geometry;
  const shouldRenderOnApprovalRegion =
    mode === MODES.ON_APPROVAL && onApprovalRegion?.geometry;
  const shouldRenderWorkingRegion =
    mode === MODES.WORKING && workingRegion?.geometry;

  return (
    <>
      {shouldRenderPendingRegion && (
        <SelectedRegionLayer data={pendingRegion.geometry} />
      )}

      {shouldRenderOnApprovalRegion && (
        <SelectedRegionLayer data={onApprovalRegion.geometry} />
      )}

      {shouldRenderWorkingRegion && (
        <SelectedRegionLayer data={workingRegion.geometry} />
      )}
    </>
  );
};
