import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { closeAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice";

const AddPOIOnPolyline = () => {
  const dispatch = useDispatch();
  const { isOpen, latlng } = useSelector((state) => state.addPoiOnPolyline);

  const [name, setName] = useState("");
  const [latitude, setLatitude] = useState("");
  const [longitude, setLongitude] = useState("");

  useEffect(() => {
    if (latlng) {
      setLatitude(latlng.lat.toFixed(5));
      setLongitude(latlng.lng.toFixed(5));
    }
  }, [latlng]);

  if (!isOpen) return null;

  const handleSubmit = async (event) => {
    event.preventDefault();

    const formData = { name, latitude, longitude };
    console.log("Neuer POI auf Polyline:", formData);

    dispatch(closeAddPoiOnPolylineModal()); // Schließt das Modal nach dem Speichern
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50" onClick={() => dispatch(closeAddPoiOnPolylineModal())}>
      <div className="bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
        <h2 className="text-lg font-bold mb-4">POI auf Polyline hinzufügen</h2>

        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label className="block">Name:</label>
            <input type="text" value={name} onChange={(e) => setName(e.target.value)} className="border p-2 w-full" required />
          </div>

          <div className="mb-4">
            <label className="block">Latitude:</label>
            <input type="text" value={latitude} readOnly className="border p-2 w-full" />
          </div>

          <div className="mb-4">
            <label className="block">Longitude:</label>
            <input type="text" value={longitude} readOnly className="border p-2 w-full" />
          </div>

          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded w-full">
            Speichern
          </button>
        </form>
      </div>
    </div>
  );
};

export default AddPOIOnPolyline;