import { ref } from "vue";

export default function useDirectionsRender() {

    const originCoords = ref(null);
    const destinationCoords = ref(null);
    const polylines = ref([]);
    const geocodeAddress = async (address) => {
      // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas
      const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API
      try {
          const response = await fetch(
            `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
              address
            )}&key=${apiKey}`
          );
          const data = await response.json();
          const location = data.results[0].geometry.location;
          return location;
      } catch (error) {
        return null;
      }
    };

    const getDirections = async () => {
      const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs';
      const originLatLng = `${originCoords.value.lat},${originCoords.value.lng}`;
      const destinationLatLng = `${destinationCoords.value.lat},${destinationCoords.value.lng}`;
      try {
          const response = await fetch(
            `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&key=${apiKey}`
          );
          const data = await response.json();
    
          if (data.routes && data.routes.length > 0) {
            const steps = data.routes[0].legs[0].steps;
            const routePolyline = steps.map((step) => ({
              lat: step.end_location.lat,
              lng: step.end_location.lng,
            }));
            polylines.value = routePolyline;
          }
      } catch (error) {
        console.log(error);
      }
    };

    return {
        originCoords,
        geocodeAddress,
        getDirections,
        polylines
    }
}