import { Source } from "react-map-gl";
import { BASE_URL } from "../../api";
import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
import { InitialPoints } from "./InitialPoints";
import { ApprovePoints } from "./ApprovePoints";
import { WorkingPoints } from "./WorkingPoints";

export const Points = () => {
  const { updateCounter } = useUpdateLayerCounter();

  return (
    <>
      <Source
        id="points"
        type="vector"
        key={`points-${updateCounter}`}
        tiles={[
          `${BASE_URL}/martin/public.service_placementpoint/{z}/{x}/{y}.pbf`,
        ]}
      >
        <InitialPoints />
        <ApprovePoints />
        <WorkingPoints />
      </Source>
    </>
  );
};
