import { useState, useRef, useEffect } from "react";
import React from "react";
import {
  useJsApiLoader,
  GoogleMap,
  Marker,
  InfoWindow,
  DirectionsRenderer,
  Autocomplete,
} from "@react-google-maps/api";

const LocationTracking = () => {
 
  const [directionsResponse, setDirectionsResponse] = useState(null);
  const [directionsService, setDirectionsService] = useState(null);
  const [markerPosition, setMarkerPosition] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(0);

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "AIzaSyBPWGBsbYA8vSBnPQ4GU4GRnKyJIqIqhIM",
  });

  const center = {
    lat: 12.899623,
    lng: 77.482697,
  };

  const origin = {
    lat: 12.9149,
    lng: 77.5206,
  };

  const destination = {
    lat: 12.899623,
    lng: 77.482697,
  };

  useEffect(() => {
    if (isLoaded) {
      setDirectionsService(new window.google.maps.DirectionsService());
    }
  }, [isLoaded]);

  async function calculateRoute() {
    if (origin === "" || destination === "") {
      return;
    }

    const results = await directionsService.route({
      origin: origin,
      destination: destination,
      travelMode: window.google.maps.TravelMode.DRIVING,
    });

    setDirectionsResponse(results);
    console.log("results.routes[0]", results.routes[0]);
    setMarkerPosition(results.routes[0].overview_path[0]);
  }

  useEffect(() => {
    if (directionsService) {
      calculateRoute();
    }
  }, [directionsService]);

  useEffect(() => {
    let interval;
    if (directionsResponse) {
      interval = setInterval(() => {
        
        if (
          currentIndex <
          directionsResponse.routes[0].overview_path.length - 1
        ) {
          setMarkerPosition(
            directionsResponse.routes[0].overview_path[currentIndex]
          );
          setCurrentIndex(currentIndex + 1);
          console.log(" currentIndex",  currentIndex);
        } else {
          clearInterval(interval);
        }
      }, 125);
    }
    return () => clearInterval(interval);
  }, [directionsResponse, currentIndex]);

  return isLoaded ? (
    <>
        <GoogleMap
            center={center}
            zoom={8}
            mapContainerStyle={{ width: "100%", height: "100vh" }}
            options={{
            zoomControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            fullscreenControl: false,
            }}
        >
        <Marker position={center} />
        {directionsResponse && (
          <>
            <DirectionsRenderer directions={directionsResponse} />
            {markerPosition && (
              <Marker
                position={ {
                  lat: markerPosition.lat(),
                  lng: markerPosition.lng(),
                } }
              />
            )}
          </>
        )}
      </GoogleMap>
    </>
  ) : (
    <></>
  );
};

export default LocationTracking;