"use client";

import { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

const icon = L.icon({
 iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
 iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
 shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
 iconSize: [25, 41],
 iconAnchor: [12, 41],
});

function LocationMarker({ position, setPosition }: { position: [number, number], setPosition: (p: [number, number]) => void }) {
 useMapEvents({
  click(e) {
   setPosition([e.latlng.lat, e.latlng.lng]);
  },
 });
 return <Marker position={position} icon={icon} />;
}

export default function LocationPicker({
 lat,
 lng,
 onChange
}: {
 lat: number,
 lng: number,
 onChange: (lat: number, lng: number) => void
}) {
 const [position, setPosition] = useState<[number, number]>([lat, lng]);

 useEffect(() => {
  onChange(position[0], position[1]);
 }, [position]);

 return (
  <div className="w-full h-[300px] rounded-xl overflow-hidden border border-slate-200 z-10 relative">
   <MapContainer center={position} zoom={10} scrollWheelZoom={true} className="w-full h-full">
    <TileLayer
     attribution='&copy; OpenStreetMap'
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <LocationMarker position={position} setPosition={setPosition} />
   </MapContainer>
   <div className="absolute bottom-4 left-4 bg-white backdrop-blur px-3 py-1.5 rounded-lg shadow-sm border border-slate-200 text-xs font-bold text-slate-700 z-[1000] pointer-events-none">
    Click map to drop pin
   </div>
  </div>
 );
}