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

const buttonStyle = {
  mt: 1,
  mb: 2,
  backgroundColor: '#a2627c',
  '&:hover': {
    background: '#a2627c',
  },
}

const joinBtnStyle = {
  mt: 5,
  mb: 2,
  backgroundColor: '#a2627c',
  '&:hover': {
    background: '#a2627c',
  },
}

const LoginPage = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [msg, setMsg] = useState('')
  const navigate = useNavigate();
  console.log(navigate)
  const handleLogin = async (event) => {
    console.log('triggered handle login')
    event.preventDefault()

    const res = await loginService.login({
      email, password,
    })
    console.log(res)
    if (!res.token) {
      console.log(res.error)
      setMsg(res.error)
    } else {
      console.log(res);
      setEmail('')
      setPassword('')
      localStorage.setItem('email', email);
      navigate('/dashboard')
    }
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundImage: `url(${BackgroundImg})`,
        minHeight: '100vh',
        height: 'auto',
      }}
      className="outer"
    >
      <CssBaseline />
      <img src={Logo} width="150" height="150"></img>
      <Box component="form" id="form" className="form" onSubmit={handleLogin} sx={{ width: 450 }}>
        <TextField
          margin="normal"
          required
          fullWidth
          id="email"
          label="Email Address"
          name="email"
          className="email"
          autoFocus
          onChange={({ target }) => setEmail(target.value)}
        />
        <TextField
          margin="normal"
          required
          fullWidth
          name="password"
          label="Password"
          type="password"
          id="password"
          className="password"
          onChange={({ target }) => setPassword(target.value)}
        />
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={buttonStyle}
          className="submitLogin"
        >
          Sign In
        </Button>
        {msg && <LoginErrorModal msg={msg} />}
      </Box>
      <Box sx={{ width: 450 }}>
        <Button
          fullWidth
          variant="contained"
          sx={buttonStyle}
          component={URLlink} to="/signup">
          Don&apos;t have an account? Sign Up
        </Button>
      </Box>
      <Box sx={{ width: 450 }}>
        <Button
          fullWidth
          variant="contained"
          sx={joinBtnStyle}
          component={URLlink} to="/join">
          Or Join as Player
        </Button>
      </Box>
    </Box>
  )
}

export default LoginPage