import { Layer, Source } from "react-map-gl";
import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter.js";
import { transliterate } from "../../utils.js";
import { aoLayer, rayonLayer } from "./layers-config";
import { OtherPostamates } from "./OtherPostamates";
import { Points } from "./Points";
import { PVZ } from "./PVZ";
import { SelectedRegion } from "./SelectedRegion";

export const Layers = ({ postGroups, otherGroups }) => {
  const { updateCounter, updatePVZLayer } = useUpdateLayerCounter();

  return (
    <>
      <Source
        id="ao"
        type="vector"
        tiles={["https://postamates.spatialsystems.ru/martin/public.service_ao/{z}/{x}/{y}.pbf"]}
      >
        <Layer
          {...aoLayer}
          layout={{
            ...aoLayer.layout,
          }}
        />
      </Source>

      <Source
        id="rayon"
        type="vector"
        tiles={["https://postamates.spatialsystems.ru/martin/public.service_rayon/{z}/{x}/{y}.pbf"]}
      >
        <Layer
          {...rayonLayer}
          layout={{
            ...rayonLayer.layout,
          }}
        />
      </Source>

      <SelectedRegion />

      <Points />

      <Source
        id="pvz"
        key={`pvz-${updateCounter}-${updatePVZLayer}`}
        type="vector"
        tiles={["https://postamates.spatialsystems.ru/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf"]}
      >
        {postGroups?.map((item) => {
          return item.groups.map((itemGroup) =>
            <PVZ
              id={itemGroup.id}
              categoryId={itemGroup.category}
              name={transliterate(itemGroup.name)}
            />
          );
        })}
      </Source>

      <Source
        id="other"
        key={`other-${updateCounter}-${updatePVZLayer}`}
        type="vector"
        tiles={["https://postamates.spatialsystems.ru/martin/public.service_otherobjects/{z}/{x}/{y}.pbf"]}
      >
        {otherGroups && otherGroups.map((item) => {
          return item.groups.map((itemGroup) =>
            <OtherPostamates
              id={itemGroup.id}
              categoryId={itemGroup.category}
              name={transliterate(itemGroup.name)}
            />
          );
        })}
      </Source>
    </>
  );
};
