import React, { useEffect, useState } from "react";
import { FlightCreate, Flight } from "../../Types";
import { useNavigate } from "react-router";
import "./FlightForm.css";
import { createFlight } from "../../Api";

export const CreateFlight = () => {
    const navigate = useNavigate();
    const [error, setError] = useState<string | null>(null);
    const [flight, setFlight] = useState<Flight>();

    const [flightData, setFlightData] = useState<FlightCreate>({
        flight_code: "ABC123",
        status: "Scheduled",
        origin: "Frankfurt",
        destination: "Rome",
        departure_time: "2023-10-09 10:00 AM",
        arrival_time: "2023-10-09 12:00 PM",
        gate: "A1",
    });

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

        setError(null);

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

        createFlight(flightData, token)
            .then((data) => {
                setFlight(data);
                navigate("/home")
            })
            .catch((error) => {
                setError(error as string);
            });
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Flight Code:
                <input
                    type="text"
                    value={flightData.flight_code}
                    name="Code"
                    onChange={(e) =>
                        setFlightData({ ...flightData, flight_code: e.target.value })
                    }
                />
            </label>
            <label>
                Status:
                <input
                    type="text"
                    name="Status"
                    value={flightData.status}
                    onChange={(e) =>
                        setFlightData({ ...flightData, status: e.target.value })
                    }
                />
            </label>
            <label>
                Origin:
                <input
                    type="text"
                    value={flightData.origin}
                    name="Origin"
                    onChange={(e) =>
                        setFlightData({ ...flightData, origin: e.target.value })
                    }
                />
            </label>
            <label>
                Destination:
                <input
                    type="text"
                    name="Destination"
                    value={flightData.destination}
                    onChange={(e) =>
                        setFlightData({ ...flightData, destination: e.target.value })
                    }
                />
            </label>
            <label>
                Departure Time:
                <input
                    type="text"
                    name="DepartureTime"
                    value={flightData.departure_time}
                    onChange={(e) =>
                        setFlightData({ ...flightData, departure_time: e.target.value })
                    }
                />
            </label>
            <label>
                Arrival Time:
                <input
                    type="text"
                    name="ArrivalTime"
                    value={flightData.arrival_time}
                    onChange={(e) =>
                        setFlightData({ ...flightData, arrival_time: e.target.value })
                    }
                />
            </label>
            <label>
                Gate:
                <input
                    type="text"
                    name="Gate"
                    value={flightData.gate}
                    onChange={(e) => setFlightData({ ...flightData, gate: e.target.value })}
                />
            </label>
            <button name="CreateFlightButton" type="submit">Submit</button>
        </form>
    );
};