"use client";

import { Conversation } from "@/types/conversations";
import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
import Link from "next/link";
import { Button } from "./ui/button";

interface MessageItemLocationProps {
    conversation: Conversation;
}       

const MessageItemLocation = ({ conversation }: MessageItemLocationProps) => {
    let lat:number = 0;
    let lng:number = 0;
    let position = { lat: -6.200000, lng: 106.816666 };
    const match = conversation.message_text.match(/Latitude:\s*(-?\d+\.\d+),\s*Longitude:\s*(-?\d+\.\d+)/);
    if (match) {
      lat = parseFloat(match[1]);
      lng = parseFloat(match[2]);
      position = { lat: lat, lng: lng };
  
      const origin = `${lat},${lng}`;     // titik awal
      const destination = "-6.200000,106.816666";            // titik tujuan
    }

    const { isLoaded } = useLoadScript({
        googleMapsApiKey: "AIzaSyAYcCwjt6ggy21W5O-7doN8TKPctnoQRxM",
    });

    const route = `https://www.google.com/maps?q=${lat},${lng}`
    if (!isLoaded) return <div>Loading...</div>;
      
    return (
        <div className="flex flex-col gap-2 w-[400px]">
           <GoogleMap
                zoom={15}
                center={position}
                mapContainerStyle={{ height: "300px", width: "100%" }}
            >
                <Marker position={position} />
            </GoogleMap>
            <Link href={route} target="_blank">
                <Button variant="outline">
                    Buka Maps
                </Button>
            </Link>
        </div>
    );
};          

export default MessageItemLocation;