import React, {useContext, useEffect, useState} from 'react';
import Navbar from "./Navbar";
import {Input} from "../custom";
import {AuthContext} from "../App";
import {registration} from "../auth";
import {toast} from "react-toastify";
import {useForm} from "react-hook-form";

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

function Register(props) {
	const {authState, authDispatch} = useContext(AuthContext)
	const {register, handleSubmit, errors} = useForm();
	const [error, setError] = useState("")
	const [status, setStatus] = useState("Register")
	const [canRegister, setRegister] = useState(true)

	function submit(data) {
		if (!canRegister) return;
		setError("")
		setStatus("Loading..");
		setRegister(false);

		(async () => {
			let {json, status} = await registration(data.user.trim(), data.email.trim(), data.pass.trim())
			setTimeout(() => setRegister(true), 1000);
			if (status !== 200) {
				setStatus("Register");
				return setError(json.reason)
			}

			toast.success("Your account has been registered.")
			window.localStorage.setItem("authtoken", json.token)
			authDispatch({response: {token: json.token, loggedIn: true}})
		})()
	}


	useEffect(() => {
		if (authState.loggedIn) props.history.push("/")
	}, [authState.loggedIn, props.history])

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

		<form className="mt-24 sm:w-96 w-full" onSubmit={handleSubmit(submit)}>
			<div className="text-2xl  w-full font-semibold block ">
				<div className="rounded-t-md inline bg-gray-100 text-gray-700 px-5 py-2">Create Account</div>
			</div>
			<div className="px-8 pt-6 pb-8 -mt-1 mb-4 px-12 rounded-md rounded-tl-none bg-gray-100">
				{error &&
				<div
						className="px-2 py-2 mb-8 bg-red-300 text-red-900 text-xs font-semibold border border-red-600 rounded">{error}</div>
				}

				<Input name="user" type="text" placeholder="Username" errors={errors}
				       register={register({
					       required: {value: true, message: "You must provide a username."},
					       minLength: {value: 3, message: "Your username must be between 3 and 16 characters."},
					       maxLength: {value: 16, message: "Your username must be between 3 and 16 characters."},
				       })}>Username</Input>

				<Input name="email" type="text" placeholder="Email" errors={errors}
				       register={register({
					       required: {value: true, message: "You must provide a password."},
					       pattern: {value: /\S+@\S+\.\S+/, message: "Invalid Email"}
				       })}>Email</Input>

				<Input name="pass" type="password" placeholder="********" errors={errors}
				       register={register({
					       required: {value: true, message: "You must provide a password."},
					       minLength: {value: 8, message: "Your password must be at least 8 characters long."}
				       })}>Password</Input>

				<div className="flex items-center justify-between">
					<input className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mr-2 rounded" type="submit"
					       value={status}/>
				</div>

			</div>
		</form>
	</div>;
}

export default Register;