// components/ShowAddStationPopup.js:
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { useRecoilState } from "recoil";
import { poiTypState } from "../store/poiTypState";

const ShowAddStationPopup = ({ map, latlng }) => {
  const [poiTypData, setPoiTypData] = useRecoilState(poiTypState);
  const [name, setName] = useState("");
  const [poiTypeId, setPoiTypeId] = useState("");
  const [latitude] = useState(latlng.lat.toFixed(5));
  const [longitude] = useState(latlng.lng.toFixed(5));

  // Effekt zum Ausgeben von poiTypData in der Konsole
  useEffect(() => {
    console.log("poiTypData in ShowAddStationPopup.js :", poiTypData);
  }, [poiTypData]);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log({ name, poiTypeId, latitude, longitude });
    map.closePopup();
  };

  return (
    <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
      <div className="flex items-center mb-4">
        <label htmlFor="name" className="block mr-2 flex-none">
          Name:
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Name der Station"
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Use w-full for full width
        />
      </div>
      <div className="flex items-center mb-4">
        <label htmlFor="idPoiTyp" className="block mr-2 flex-none">
          Typ:
        </label>
        <select
          id="idPoiTyp"
          name="idPoiTyp"
          value={poiTypeId}
          onChange={(e) => setPoiTypeId(e.target.value)}
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Adjusted width
        >
          {poiTypData.map((poiTyp) => (
            <option key={poiTyp.id} value={poiTyp.id}>
              {poiTyp.name}
            </option>
          ))}
        </select>
      </div>
      <div className="flex items-center mb-4">
        <label htmlFor="lat" className="block mr-2 flex-none">
          Breitengrad:
        </label>
        <input
          type="text"
          id="lat"
          name="lat"
          value={latitude}
          readOnly
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Adjusted width
        />
      </div>
      <div className="flex items-center mb-4">
        <label htmlFor="lng" className="block mr-2 flex-none">
          Längengrad:
        </label>
        <input
          type="text"
          id="lng"
          name="lng"
          value={longitude}
          readOnly
          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Adjusted width
        />
      </div>
      <button
        type="submit"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
      >
        Station hinzufügen
      </button>
    </form>
  );
};

export default ShowAddStationPopup;