import { Layer } from "react-map-gl";
import { approvePointLayer } from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { STATUSES } from "../../config";
import { useRegionFilterExpression } from "./useRegionFilterExpression";
import { LAYER_IDS } from "./constants";
import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";

const statusExpression = ["==", ["get", "status"], STATUSES.onApproval];

export const OnApprovalPoints = () => {
  const { isVisible } = useLayersVisibility();
  const {
    filters: { region },
  } = useOnApprovalPointsFilters();
  const regionFilterExpression = useRegionFilterExpression(region);

  const filter = regionFilterExpression
    ? ["all", statusExpression, regionFilterExpression]
    : statusExpression;

  return (
    <>
      <Layer
        {...approvePointLayer}
        id={LAYER_IDS.approve}
        source={"points"}
        source-layer={"public.service_points_with_dist"}
        layout={{
          visibility: isVisible[LAYER_IDS.approve] ? "visible" : "none",
        }}
        filter={filter}
      />
    </>
  );
};