import React, { useEffect, useRef } from 'react';
import { Location } from '../models/Location';

interface MapProps {
  locations: Location[];
  mapCenter: Location;
}

const Map: React.FC<MapProps> = ({ mapCenter, locations }) => {
  const mapEle = useRef<HTMLDivElement>(null);
  const map = useRef<google.maps.Map>();

  useEffect(() => {
    map.current = new google.maps.Map(mapEle.current, {
      center: {
        lat: mapCenter.lat,
        lng: mapCenter.lng,
      },
      zoom: 16,
    });

    addMarkers();

    google.maps.event.addListenerOnce(map.current, 'idle', () => {
      if (mapEle.current) {
        mapEle.current.classList.add('show-map');
      }
    });

    function addMarkers() {
      locations.forEach(markerData => {
        let infoWindow = new google.maps.InfoWindow({
          content: `<h5>${markerData.name}</h5>`,
        });

        let marker = new google.maps.Marker({
          position: new google.maps.LatLng(markerData.lat, markerData.lng),
          map: map.current!,
          title: markerData.name,
        });

        marker.addListener('click', () => {
          infoWindow.open(map.current!, marker);
        });
      });
    }
  }, [mapCenter, locations]);

  return <div ref={mapEle} className="map-canvas"></div>;
};

export default Map;