'use client';

import { useEffect, useRef } from 'react';

/**
 * MapLayers - Native Google Maps layer components.
 *
 * Native Google Maps overlay layers that can be added to a map instance.
 * These layers are used inside the `Map` component via the `layers` prop.
 *
 * Available layer types:
 * - `traffic`: Real-time traffic overlay
 * - `transit`: Public transit routes overlay
 * - `bicycling`: Bicycle route overlay
 */

export type MapLayerType = 'traffic' | 'transit' | 'bicycling';

export interface MapLayersConfig {
  traffic?: boolean;
  transit?: boolean;
  bicycling?: boolean;
}

/**
 * Hook for managing Google Maps overlay layers.
 *
 * @param map - The Google Maps instance to attach layers to
 * @param layers - Configuration object specifying which layers to display
 */
export function useMapLayers(map: google.maps.Map | null, layers: MapLayersConfig) {
  const trafficLayerRef = useRef<google.maps.TrafficLayer | null>(null);
  const transitLayerRef = useRef<google.maps.TransitLayer | null>(null);
  const bicyclingLayerRef = useRef<google.maps.BicyclingLayer | null>(null);

  // Traffic Layer
  useEffect(() => {
    if (!map) return;

    if (layers.traffic) {
      if (!trafficLayerRef.current) {
        trafficLayerRef.current = new google.maps.TrafficLayer();
      }
      trafficLayerRef.current.setMap(map);
    } else {
      if (trafficLayerRef.current) {
        trafficLayerRef.current.setMap(null);
      }
    }

    return () => {
      if (trafficLayerRef.current) {
        trafficLayerRef.current.setMap(null);
      }
    };
  }, [map, layers.traffic]);

  // Transit Layer
  useEffect(() => {
    if (!map) return;

    if (layers.transit) {
      if (!transitLayerRef.current) {
        transitLayerRef.current = new google.maps.TransitLayer();
      }
      transitLayerRef.current.setMap(map);
    } else {
      if (transitLayerRef.current) {
        transitLayerRef.current.setMap(null);
      }
    }

    return () => {
      if (transitLayerRef.current) {
        transitLayerRef.current.setMap(null);
      }
    };
  }, [map, layers.transit]);

  // Bicycling Layer
  useEffect(() => {
    if (!map) return;

    if (layers.bicycling) {
      if (!bicyclingLayerRef.current) {
        bicyclingLayerRef.current = new google.maps.BicyclingLayer();
      }
      bicyclingLayerRef.current.setMap(map);
    } else {
      if (bicyclingLayerRef.current) {
        bicyclingLayerRef.current.setMap(null);
      }
    }

    return () => {
      if (bicyclingLayerRef.current) {
        bicyclingLayerRef.current.setMap(null);
      }
    };
  }, [map, layers.bicycling]);
}

/**
 * Exemplo de uso:
 *
 * ```tsx
 * import { Map } from '../map';
 * import { useState } from 'react';
 *
 * function MyMapComponent() {
 *   const [layers, setLayers] = useState({
 *     traffic: false,
 *     transit: false,
 *     bicycling: false,
 *   });
 *
 *   return (
 *     <Map
 *       center={{ lat: -23.5505, lng: -46.6333 }}
 *       zoom={13}
 *       layers={layers}
 *     />
 *   );
 * }
 * ```
 */