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

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 [flight, setFlight] = useState<Flight>();

    const { flight: initialData } = useFetchFlight(id);

    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) => {
                setFlight(data);
                navigate("/home")
            })
            .catch((error) => {
                setError(error as string);
            });
    };

    return (
        <form onSubmit={handleSubmit}>
    
            <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>
    );
};
