import { Source } from "react-map-gl";
import { BASE_URL, useSourceLayerName } from "../../api";
import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
import { PendingPoints } from "./PendingPoints";
import { OnApprovalPoints } from "./OnApprovalPoints";
import { WorkingPoints } from "./WorkingPoints";
import { FilteredWorkingPoints } from "./FilteredWorkingPoints";
import { CancelledPoints } from "./CancelledPoints";
import { useEffect } from "react";

export const Points = () => {
  const { updateCounter, toggleUpdateCounter, updatePVZLayer } = useUpdateLayerCounter();
  const layer = useSourceLayerName();
  useEffect(() => {
    toggleUpdateCounter();
  }, [layer]);

  return (
    <>
      <Source
        id="points"
        type="vector"
        key={`points-${updateCounter}-${updatePVZLayer}`}
        tiles={[
          `${BASE_URL}/martin/${layer}/{z}/{x}/{y}.pbf`,
        ]}
      >
        <PendingPoints />
        <OnApprovalPoints />
        <CancelledPoints />
        <WorkingPoints />
        <FilteredWorkingPoints />
      </Source>
    </>
  );
};
