useOlMapLayers.ts

/* eslint-disable no-magic-numbers */
import { MapInstance } from '@/types/map';
import { useEffect } from 'react';
import { MapConfig } from '../../MapViewer.types';
import { useOlMapOverlaysLayer } from './overlaysLayer/useOlMapOverlaysLayer';
import { useOlMapPinsLayer } from './pinsLayer/useOlMapPinsLayer';
import { useOlMapReactionsLayer } from './reactionsLayer/useOlMapReactionsLayer';
import { useOlMapTileLayer } from './useOlMapTileLayer';

interface UseOlMapLayersInput {
  mapInstance: MapInstance;
}

export const useOlMapLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig['layers'] => {
  const tileLayer = useOlMapTileLayer();
  const pinsLayer = useOlMapPinsLayer();
  const reactionsLayer = useOlMapReactionsLayer();
  const overlaysLayer = useOlMapOverlaysLayer();

  useEffect(() => {
    if (!mapInstance) {
      return;
    }

    mapInstance.setLayers([tileLayer, reactionsLayer, pinsLayer, overlaysLayer]);
  }, [reactionsLayer, tileLayer, pinsLayer, mapInstance, overlaysLayer]);

  return [tileLayer, pinsLayer, reactionsLayer, overlaysLayer];
};