import {Layer} from "react-map-gl";
import {useLayersVisibility} from "../../stores/useLayersVisibility.js";
import {useRegionFilterExpression} from "../../Map/Layers/useRegionFilterExpression.js";
import { dispatcherPointLayer, getPointSymbolLayer } from "./layers-config.js";
import {LAYER_IDS} from "../constants.js";
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
import {useSimulateAccident} from "../../stores/useSimulateAccident.js";

const typeExpression = ["==", ["get", "point_type"], LAYER_IDS.dispatcher];

export const DispatcherLayer = () => {
  const { isVisible } = useLayersVisibility();
  const {
    filters: { region },
  } = useDzkhFilters();
  const regionFilterExpression = useRegionFilterExpression(region);
  const { selectedSourceConfig } = useSimulateAccident()

  const getFilter = () => {
    const result = ["all", typeExpression];
    if (regionFilterExpression) {
      result.push(regionFilterExpression)
    }

    if (selectedSourceConfig.sourceId) {
      result.push(["==", ["get", "ods_number"], selectedSourceConfig.dispatcherNumber])
    }
    return result
  };

  return (
    <>
      <Layer
        type={getPointSymbolLayer("dispatcherIcon").type}
        id={LAYER_IDS.dispatcher}
        source={"points"}
        source-layer={"public.data"}
        layout={{
          ...getPointSymbolLayer("dispatcherIcon").layout,
          visibility: isVisible[LAYER_IDS.dispatcher] ? "visible" : "none",
        }}
        filter={getFilter()}
      />
    </>
  );
};
