import React, { useState } from 'react'
import {
  Box, Button, CssBaseline, TextField,
} from '@mui/material'
import signUpService from '../BackendRequests/signup'
import { Link as URLlink, useNavigate } from 'react-router-dom'
import Logo from '../BigBrainLogo.png'
import BackgroundImg from '../BackgroundImage.png'
import LoginErrorModal from './LoginErrorModal'

const style = {
  mt: 0.5,
  mb: 2,
  backgroundColor: '#a2627c',
  '&:hover': {
    background: '#a2627c',
  }
}
const RegisterPage = () => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const navigate = useNavigate();
  const [msg, setMsg] = useState('')

  const handleLogin = async (event) => {
    event.preventDefault()
    try {
      const res = await signUpService.register({
        name, email, password,
      })
      if (!res.token) {
        console.log(res.error)
        setMsg(res.error)
      } else {
        setEmail('')
        setPassword('')
        navigate('/dashboard');
      }
    } catch (exception) {
      // console.log(exception)
    }
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundImage: `url(${BackgroundImg})`,
        minHeight: '100vh',
        height: 'auto',
      }}
    >
      <CssBaseline />
      <img src={Logo} width="150" height="150"></img>
      <Box component="form" onSubmit={handleLogin} sx={{ mt: 1, width: 450 }}>
        <TextField
          margin="normal"
          required
          fullWidth
          id="name"
          label="Name"
          name="name"
          autoFocus
          onChange={({ target }) => setName(target.value)}
        />
        <TextField
          margin="normal"
          required
          fullWidth
          id="email"
          label="Email Address"
          name="email"
          autoFocus
          onChange={({ target }) => setEmail(target.value)}
        />
        <TextField
          margin="normal"
          required
          fullWidth
          name="password"
          label="Password"
          type="password"
          id="password"
          onChange={({ target }) => setPassword(target.value)}
        />
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={style}
        >
          Register
        </Button>
        {msg && <LoginErrorModal msg={msg} />}
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={style}
          component={URLlink} to="/login">
          Return to login
        </Button>
      </Box>
    </Box>
  )
}

export default RegisterPage