import React, { useState } from "react";
import { FlightEditNotNull, Flight } from "../../Types";
import { useNavigate, useParams } from "react-router";
import "./FlightForm.css";
import { editFlight } from "../../Api";

interface Props {
    flight?: Flight;
}

export const EditFlight: React.FC<Props> = (props) => {
    const navigate = useNavigate();
    let { id } = useParams();
    const [error, setError] = useState<string | null>(null);

    const [flightData, setFlightData] = useState<FlightEditNotNull>({
        status: "",
        departure_time: "",
        arrival_time: "",
        gate: ""
    });

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

        setError(null);

        const token = localStorage.getItem("token");
        if (!token) {
            setError("No token!");
            return;
        }

        let data: any = {}
        if (flightData.arrival_time != "") {
            data["arrival_time"] = flightData.arrival_time
        }
        if (flightData.departure_time != ""){
            data["departure_time"] = flightData.departure_time
        }

        if (flightData.status != ""){
            data["status"] = flightData.status
        }
        if (flightData.gate != ""){
            data["gate"] = flightData.gate
        }
        

        if (id == null || id == undefined)
            return;

        editFlight(id, data, token)
            .then((data) => {
                navigate("/home")
            })
            .catch((error) => {
                try {
                    setError(JSON.parse(error.response.data)["detail"] as string);
                } catch {}
            });
    };

    return (
        <form onSubmit={handleSubmit}>
            {error &&
                <div className="form-error">
                    <p><strong>Error:</strong> {error}</p>
                </div>
            } 
            <label>
                Status:
                <input
                    type="text"
                    value={flightData?.status}
                    onChange={(e) =>
                        setFlightData({ ...flightData, status: e.target.value })
                    }
                />
            </label>
            <label>
                Departure Time:
                <input
                    type="text"
                    value={flightData?.departure_time}
                    onChange={(e) =>
                        setFlightData({ ...flightData, departure_time: e.target.value })
                    }
                />
            </label>
            <label>
                Arrival Time:
                <input
                    type="text"
                    value={flightData?.arrival_time}
                    onChange={(e) =>
                        setFlightData({ ...flightData, arrival_time: e.target.value })
                    }
                />
            </label>
            <label>
                Gate:
                <input
                    type="text"
                    value={flightData?.gate}
                    onChange={(e) => setFlightData({ ...flightData, gate: e.target.value })}
                />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};