import React, { useEffect, useRef } from 'react';
import { GoogleMap, DirectionsRenderer, useJsApiLoader } from '@react-google-maps/api';

interface Coordinates {
  lat: number;
  long: number;
}

interface MapDirectionsProps {
  origin?: Coordinates;
  destination?: Coordinates;
}

const containerStyle = {
  width: '100%',
  height: '350px',
};

const spinnerStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '400px',
};

const spinner = (
  <div style={spinnerStyle}>
    <div className="lds-dual-ring"></div>
    <style>{`
      .lds-dual-ring {
        display: inline-block;
        width: 64px;
        height: 64px;
      }
      .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 46px;
        height: 46px;
        margin: 1px;
        border-radius: 50%;
        border: 5px solid #4fa94d;
        border-color: #4fa94d transparent #4fa94d transparent;
        animation: lds-dual-ring 1.2s linear infinite;
      }
      @keyframes lds-dual-ring {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `}</style>
  </div>
);

const MapDirections: React.FC<MapDirectionsProps> = ({ origin, destination }) => {
  const directionsServiceRef = useRef<google.maps.DirectionsService | null>(null);
  const [directions, setDirections] = React.useState<google.maps.DirectionsResult | null>(null);

  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: 'YOUR_API_KEY', // Replace with your actual API key
    libraries: ['places'],
  });

  useEffect(() => {
    if (origin && destination && isLoaded) {
      if (!directionsServiceRef.current) {
        directionsServiceRef.current = new google.maps.DirectionsService();
      }

      directionsServiceRef.current.route(
        {
          origin: { lat: origin.lat, lng: origin.long },
          destination: { lat: destination.lat, lng: destination.long },
          travelMode: google.maps.TravelMode.DRIVING,
        },
        (result, status) => {
          if (status === google.maps.DirectionsStatus.OK && result) {
            setDirections(result);
          } else {
            console.error('Directions request failed:', status);
          }
        }
      );
    }
  }, [origin, destination, isLoaded]);

  if (!isLoaded) return spinner;

  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={{ lat: origin?.lat || 0, lng: origin?.long || 0 }}
      zoom={13}
      options={{ disableDefaultUI: true }}
    >
      {directions && <DirectionsRenderer directions={directions} />}
    </GoogleMap>
  );
};

export default MapDirections;