import { Layer } from "react-map-gl";
import {getPointSymbolLayer} from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { LAYER_IDS } from "./constants";

export const OtherPostamates = ({ id, categoryId, name }) => {
  const { isVisible } = useLayersVisibility();
  const filter = ["==", ["get", "group_id"], id]

  return (
    <>
      <Layer
        {...getPointSymbolLayer(name + id)}
        id={LAYER_IDS.other + id}
        source={"other"}
        source-layer={"public.service_otherobjects"}
        layout={{
          ...getPointSymbolLayer(name + id).layout,
          visibility: isVisible[LAYER_IDS.other_category + categoryId] ? "visible" : "none",
        }}
        filter={filter}
      />
    </>
  );
};
