import { Layer } from "react-map-gl";
import { workingPointSymbolLayer } from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { MODES, STATUSES } from "../../config";
import { useRegionFilterExpression } from "./useRegionFilterExpression";
import { LAYER_IDS } from "./constants";
import { useMode } from "../../stores/useMode";
import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
import {useSourceLayerName} from "../../api.js";

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

export const WorkingPoints = () => {
  const { isVisible } = useLayersVisibility();
  const layerName = useSourceLayerName();
  const {
    filters: { region },
  } = useOnApprovalPointsFilters();

  const regionFilterExpression = useRegionFilterExpression(region);
  const { mode } = useMode();

  const getFilter = () => {
    if (mode === MODES.ON_APPROVAL) {
      return regionFilterExpression
        ? ["all", statusExpression, regionFilterExpression]
        : statusExpression;
    }

    return statusExpression;
  };

  return (
    <>
      <Layer
        {...workingPointSymbolLayer}
        id={LAYER_IDS.working}
        source={"points"}
        source-layer={layerName}
        layout={{
          ...workingPointSymbolLayer.layout,
          visibility: isVisible[LAYER_IDS.working] ? "visible" : "none",
        }}
        filter={getFilter()}
      />
    </>
  );
};
