import * as React from 'react';
import { useField } from 'payload/components/forms';

export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
  const { value, setValue } = useField<string>({ path });
  const [latitude, setLatitude] = React.useState(null);
  const [longitude, setLongitude] = React.useState(null);

  const handleKeyPress = async (e) => {
    if (e.key === 'Enter') {
      try {
        const response = await fetch(
          `https://nominatim.openstreetmap.org/search?format=json&q=${value}`
        );
        const data = await response.json();
        if (data && data.length > 0) {
          setLatitude(parseFloat(data[0].lat));
          setLongitude(parseFloat(data[0].lon));
        }
      } catch (error) {
        console.error('Error fetching geolocation:', error);
      }
    }
  };

  return (
    <div>
      <div className='field-type text'>
        <label className='field-label'>
          City
        </label>
        <input
          type="text"
          className='field-name'
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleKeyPress}
          placeholder="Enter city to get coordinates"
        />
      </div>
      <div className="field-type point">
        <ul className='point__wrap'>
          <li>
            <label className='field-label'>Location - Longitude</label>
            <input id="field-longitude-location" type="number" name="location.longitude" value={longitude}></input>
          </li>
          <li>
            <label className='field-label'>Location - Latitude</label>
            <input id="field-latitude-latitude" type="number" name="location.latitude" value={latitude}></input>
          </li>
        </ul>
      </div>
    </div>
  );
};