import React, {useEffect, useReducer} from 'react';
import {BrowserRouter, Route, Switch} from "react-router-dom";
import {Slide, ToastContainer} from "react-toastify";
import 'react-toastify/dist/ReactToastify.min.css'

import './styles/app.css'
import {authenticate, defaultAuth, reducer} from "./auth";
// pages
import Home from "./components/Home";
import Login from "./components/Login";
import Logout from "./components/Logout";
import Register from "./components/Register";
import Upload from "./components/Upload";
import NotFound from "./components/NotFound";
import ViewAll from "./components/ViewAll";
import Admin from "./components/Admin";
import MyData from "./components/ViewOwn";

export const AuthContext = React.createContext(undefined)

function App() {
	const [authState, authDispatch] = useReducer(reducer, defaultAuth(), () => defaultAuth())

	useEffect(() => {
		(async () => {
			authDispatch({response: await authenticate(authState.token)})
		})().then()
	}, [authState.token])

	return (
			<BrowserRouter>
				<div className="App">
					<AuthContext.Provider value={{authState, authDispatch}}>
						<Switch>
							<Route path="/login" exact component={Login}/>
							<Route path="/logout" exact component={Logout}/>
							<Route path="/register" exact component={Register}/>

							<Route path="/upload" exact component={Upload}/>
							<Route path="/all" exact component={ViewAll}/>
							<Route path="/mydata" exact component={MyData}/>

							<Route path="/admin" exact component={Admin}/>

							<Route path="/" exact component={Home}/>
							<Route path="/" component={NotFound}/>
						</Switch>
					</AuthContext.Provider>
				</div>
				<ToastContainer
						position="bottom-right"
						autoClose={3000}
						newestOnTop
						closeOnClick
						rtl={false}
						pauseOnFocusLoss
						draggable
						transition={Slide}
						pauseOnHover={false}
				/>
			</BrowserRouter>
	);
}

export default App;