import { Points } from "./Points";
import { Layer, Source } from "react-map-gl";
import { aoLayer, rayonLayer, selectedRegionLayer } from "./layers-config";
import { useFilters } from "../../stores/useFilters";
import { BASE_URL } from "../../api";

export const Layers = () => {
  const {
    filters: { prediction, region },
  } = useFilters();

  return (
    <>
      <Source
        id="ao"
        type="vector"
        tiles={[`${BASE_URL}/martin/public.service_ao/{z}/{x}/{y}.pbf`]}
      >
        <Layer
          {...aoLayer}
          layout={{
            ...aoLayer.layout,
          }}
        />
      </Source>

      <Source
        id="rayon"
        type="vector"
        tiles={[`${BASE_URL}/martin/public.service_rayon/{z}/{x}/{y}.pbf`]}
      >
        <Layer
          {...rayonLayer}
          layout={{
            ...rayonLayer.layout,
          }}
        />
      </Source>

      {region && region.geometry && (
        <Source id="selected-region" type="geojson" data={region.geometry}>
          <Layer
            {...selectedRegionLayer}
            layout={{
              ...selectedRegionLayer.layout,
              visibility: region ? "visible" : "none",
            }}
          />
        </Source>
      )}

      <Points prediction={prediction} />
    </>
  );
};
