scrap/src/app/components/AddressSuggestions.tsx

import React, { useState, useRef, ChangeEvent, useEffect } from 'react';

interface AddressSuggestionsProps {
  address: string;
  setAddress: (address: string) => void;
  postcode: string;
  setPostcode: (postcode: string) => void;
  setCity: (city: string) => void;
}

const fetchAddressSuggestions = async (query: string): Promise<any[]> => {
  try {
    const response = await fetch(
      `https://api.dataforsyningen.dk/adgangsadresser/autocomplete?q=${encodeURIComponent(query)}&fuzzy=true`
    );
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching address suggestions:', error);
    return [];
  }
};

const fetchCity = async (postcode: string): Promise<string | null> => {
  try {
    const response = await fetch(`https://api.dataforsyningen.dk/postnumre?nr=${postcode}`);
    const data = await response.json();
    if (data.length > 0) {
      return data[0].navn; // Return the city name
    }
    return null;
  } catch (error) {
    console.error('Error fetching city:', error);
    return null;
  }
};

const AddressSuggestions: React.FC<AddressSuggestionsProps> = ({ address, setAddress, postcode, setPostcode, setCity }) => {
  const [addressSuggestions, setAddressSuggestions] = useState<any[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const suggestionListRef = useRef<HTMLUListElement | null>(null);

  const handleAddressChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setAddress(newValue);

    if (newValue) {
      const suggestions = await fetchAddressSuggestions(newValue);
      setAddressSuggestions(suggestions);
      setShowSuggestions(true);
    } else {
      setAddressSuggestions([]);
      setShowSuggestions(false);
    }
  };

  const handleAddressSelect = async (selectedAddress: any) => {
    const adgangsadresse = selectedAddress.adgangsadresse;
    if (adgangsadresse) {
      const street = [adgangsadresse.vejnavn, adgangsadresse.husnr].filter(Boolean).join(' ');
      const postcode = adgangsadresse.postnr || '';
      setAddress(street);
      setPostcode(postcode);
      setAddressSuggestions([]);
      setShowSuggestions(false);

      // Fetch and set the city based on the selected postcode
      const cityName = await fetchCity(postcode);
      if (cityName) {
        setCity(cityName);
      }
    }
  };

  const handleClickOutside = (event: MouseEvent) => {
    if (suggestionListRef.current && !suggestionListRef.current.contains(event.target as Node)) {
      setShowSuggestions(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  useEffect(() => {
    const fetchAndSetCity = async () => {
      if (postcode) {
        const cityName = await fetchCity(postcode);
        if (cityName) {
          setCity(cityName);
        }
      }
    };
    fetchAndSetCity();
  }, [postcode, setCity]);

  return (
    <div className="relative mb-4">
      <label htmlFor="address" className="block text-sm font-medium text-gray-700">Address</label>
      <input
        id="address"
        type="text"
        value={address}
        onChange={handleAddressChange}
        className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm"
        required
      />
      {showSuggestions && addressSuggestions.length > 0 && (
        <ul ref={suggestionListRef} className="absolute z-50 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
          {addressSuggestions.map((suggestion, index) => {
            const adgangsadresse = suggestion.adgangsadresse;
            if (!adgangsadresse) return null;

            const vejnavn = adgangsadresse.vejnavn || '';
            const husnr = adgangsadresse.husnr || '';
            const postnr = adgangsadresse.postnr || '';

            return (
              <li
                key={index}
                onMouseDown={() => handleAddressSelect(suggestion)}
                className="p-2 hover:bg-gray-100 cursor-pointer"
              >
                {vejnavn} {husnr}, {postnr}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
};

export default AddressSuggestions;