"use client";

import { useEffect } from "react";
import { AdvancedMarker, useMap } from "@vis.gl/react-google-maps";
import { GoogleMapFrame, type GoogleMapConfig } from "./google-map";

function CoordinateCamera({ latitude, longitude }: { latitude: number; longitude: number }) {
  const map = useMap();
  useEffect(() => { map?.panTo({ lat: latitude, lng: longitude }); }, [map, latitude, longitude]);
  return null;
}
export function CoordinateMap({ config, latitude, longitude, onChange }: {
  config: GoogleMapConfig;
  latitude: number;
  longitude: number;
  onChange: (latitude: number, longitude: number) => void;
}) {
  return (
    <GoogleMapFrame config={config} center={{ lat: latitude, lng: longitude }} className="h-72" onClick={event => {
      if (event.detail.latLng) onChange(event.detail.latLng.lat, event.detail.latLng.lng);
    }}>
      <CoordinateCamera latitude={latitude} longitude={longitude} />
      <AdvancedMarker position={{ lat: latitude, lng: longitude }} title="Chargepoint position" draggable onDragEnd={event => {
        if (event.latLng) onChange(event.latLng.lat(), event.latLng.lng());
      }} />
    </GoogleMapFrame>
  );
}