import { LogIn } from "./components/LogIn/LogIn";
import { Navigate, Route, RouteProps, Routes } from "react-router";
import { SignUp } from "./components/SignUp/SignUp";
import { Home } from "./components/Home/Home";
import { CreateFlight } from "./components/CreateFlight/CreateFlight";
import { Button } from "antd";
import useAuth, { AuthProvider } from "./useAuth";
import { EditFlight } from "./components/CreateFlight/EditFlight";

function Router() {
    const { user, logout, isAirline, isAdmin } = useAuth();

    return (
        <div className="App">
            <Routes>
                <Route path="/login" element={<LogIn />} />
                <Route path="/signup" element={<SignUp />} />
                <Route path="/home" element={!user ? <LogIn /> : <Home />} />
                <Route path="/create-flight" element={!isAirline ? <LogIn /> : <CreateFlight />} />
                <Route path="/edit-flight/:id" element={!isAirline && !isAdmin ? <LogIn /> : <EditFlight />} />
                <Route path="/" element={!user ? <LogIn /> : <Home />} />
            </Routes>
            <div className="LogoutButton">
                {
                    <Button
                        onClick={logout}
                        disabled={!!!localStorage.getItem("token")}
                    >
                        Logout
                    </Button>
                }
            </div>
        </div>
    );
}

function App() {
    return (
        <AuthProvider>
            <Router />
        </AuthProvider>
    );
}

export default App;