// imports
import React from "react";
import clsx from "clsx";
import { Link } from "react-router-dom";

// material & fuse
import FuseAnimate from "@fuse/core/FuseAnimate";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import { darken } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography";
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

// components
import LoginForm from "./LoginForm";
// import GoogleBtn from './GoogleBtn';
// import FacebookBtn from './FacebookBtn';
const useStyles = makeStyles((theme) => ({
	root: {
		background: `radial-gradient(${darken(theme.palette.primary.dark, 0.5)} 0%, ${theme.palette.primary.dark} 80%)`,
		color: theme.palette.primary.contrastText
	}
}));



function Login() {
	const classes = useStyles();
    const [value, setValue] = React.useState('female');
  
	const handleChange = (event) => {
	  setValue(event.target.value);
	};

 

	return (
		<div className={clsx(classes.root, "flex flex-col flex-auto flex-shrink-0 p-24 h-full md:flex-row md:p-0")}>
			<div className="flex flex-col flex-grow-0 items-center text-white p-16 text-center md:p-128 md:items-start md:flex-shrink-0 md:flex-1 md:text-left">
				{/* <FuseAnimate animation="transition.expandIn">
					<img className="w-128 mb-32" src="static/assets/images/logos/fuse.svg" alt="logo" />
				</FuseAnimate> */}

				<FuseAnimate animation="transition.slideUpIn" delay={300}>
					<Typography variant="h4" color="inherit" className="font-light">
						Welcome to Online Assessment !
					</Typography>
				</FuseAnimate>

				<FuseAnimate delay={400}>
					<Typography variant="subtitle1" color="inherit" className="max-w-512 mt-16">
					Ultimate destination for auto grading online theory exams with ease and simplifying the assessment cycle.
					</Typography>
				</FuseAnimate>
			</div>

			<FuseAnimate animation={{ translateX: [0, "100%"] }}>
				<Card className="w-full max-w-400 mx-auto m-16 md:m-0" square>
					<CardContent className="flex flex-col items-center justify-center p-32 md:p-48 md:pt-128 ">
						<Typography variant="h6" className="md:w-full mb-32">
						LOGIN TO YOUR ACCOUNT
						</Typography>
                        
						<Typography variant="h6" className="md:w-full mb-32">
						
						</Typography>
						<LoginForm />

						{/*<div className='my-24 flex items-center justify-center'>
							<Divider className='w-32' />
							<span className='mx-8 font-bold'>OR</span>
							<Divider className='w-32' />
						</div>
						 <GoogleBtn/>
						<FacebookBtn/> 
						<div className="flex flex-col items-center justify-center pt-32 pb-24">
							<span className="font-medium">Don't have an account?</span>
							<Link className="font-medium underline text-blue-200" to="/register">
								Create an account
							</Link>
						</div>*/}
					</CardContent>
				</Card>
			</FuseAnimate>
		</div>
	);
}


export default Login;
