import { useState, useRef, useEffect } from "react";
import React from "react";
import {
  useJsApiLoader,
  GoogleMap,
  Marker, 
  DirectionsRenderer,

} from "@react-google-maps/api";
import directionIcon from '../../assets/img/icon_Nav.svg';
import HouseIcon from '../../assets/img/icon_House.svg';
import wareHouseIcon from '../../assets/img/icon_Warehouse.svg'

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]);
    console.log("results.routes[0].overview_path[0]", results.routes[0].overview_path[0].lat());
    console.log("results.routes[0].overview_path[0]", results.routes[0].overview_path[0].lng());
    setMarkerPosition(results.routes[0].overview_path[0]);
    console.log("calculateHeading",calculateHeading(results.routes[0], results.routes[1]));
  
  }

  const calculateHeading = (cord1, cord2) => {
    if (cord2) {
    //   const {latitude: lat1, longitude: lng1} = cord1;
    //   const {latitude: lat2, longitude: lng2} = cord2;
        const lat1 = cord1.lat();
        const lng1 = cord1.lng();
        const lat2 = cord2.lat();
        const lng2 = cord2.lng();
        const y = Math.sin(lng2 - lng1) * Math.cos(lat2);
        const x =
        Math.cos(lat1) * Math.sin(lat2) -
        Math.sin(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1);
      const θ = Math.atan2(y, x);
      const brng = ((θ * 180) / Math.PI + 360) % 360;
      return brng;
    }
    
  };


  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);
          
        } 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,
            }}
        >
            {directionsResponse && (
        <>
            <Marker
              position={origin}
              icon={{
                url: wareHouseIcon,
                scaledSize: new window.google.maps.Size(32, 32),
                anchor: new window.google.maps.Point(16, 16),
                rotation: 0,
              }}
            />
            <Marker
              position={destination}
              icon={{
                url: HouseIcon,
                scaledSize: new window.google.maps.Size(32, 32),
                anchor: new window.google.maps.Point(16, 16),
                rotation: 0,
              }}
            />
        </>)}
        
            {directionsResponse && (
                <>
                    <DirectionsRenderer directions={directionsResponse} 
                    options={{ suppressMarkers: true,}}/>
                    {markerPosition && (
                    <Marker
                        position={ {
                        lat: markerPosition.lat(),
                        lng: markerPosition.lng(),
                        }}
                        icon={{ 
                            url: directionIcon, 
                            scaledSize: new window.google.maps.Size(64, 64),                             
                            anchor: new window.google.maps.Point(32, 32),
                            rotation: 250
                        }}
                        
                    />
                    
                    )}
                </>

            )}
           
      </GoogleMap>
    </>
  ) : (
    <></>
  );
};
export default LocationTracking;