import React, {useContext, useEffect} from 'react';
import Navbar from "./Navbar";
import {AuthContext} from "../App";
import FileUploadForm from "./FileUploadForm";
import FileManualForm from "./FileManualForm";

const background = require('../assets/wave.png')


function Upload(props) {
	const {authState} = useContext(AuthContext)

	useEffect(() => {
		if (!authState.loggedIn) props.history.push("/login?return=upload")
	}, [authState.loggedIn, props.history])

	return (
			<div className="w-screen h-screen overflow-x-hidden bg-cover bg-center text-white flex items-center flex-col"
			     style={{backgroundImage: `url(${background})`}}>
				<Navbar history={props.history} color={"text-blue-600"} hover={"hover:border-blue-600"}/>

				<div className="container text-gray-700">
					<div className="flex flex-wrap justify-center -mx-6 md:mx-0 overflow-hidden lg:-mx-12 xl:-mx-5 mt-16">
						<FileUploadForm/>
						<FileManualForm/>
					</div>
				</div>
			</div>
	);
}

export default Upload;