import { Grid, Input, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { useContext, useRef } from 'react';
import { Link } from 'react-router-dom';
import AuthContext from '../context/AuthContext';

const useStyles = makeStyles({
  root: { margin: '8% 38%' },
  loginTitle: { fontSize: '24px', marginBottom: '20px' },
  input: {
    marginBottom: '15px',
    fontSize: '16px',
    padding: '0 15px',
    height: '50px',
    borderBottom: '1px solid #c0c0c0',
  },
  loginbutton: {
    margin: '10px 0',
    height: '55px',
    width: '100%',
    backgroundColor: '#333',
    color: '#ffffff',
    fontWeight: 600,
    fontSize: '18px',
    border: '1px solid #333',
    '&:hover': {
      backgroundColor: 'black',
    },
  },
  facebookbutton: {
    margin: '10px 0',
    height: '55px',
    width: '100%',
    backgroundColor: '#4267b2',
    color: '#ffffff',
    fontSize: '16px',
    border: 'none',
    '&:hover': {
      backgroundColor: '#324e87',
    },
  },
  link: {
    fontSize: '14px',
    fontFamily: 'Noto Sans KR',
    textDecoration: 'none',
    color: '#333',
  },
  registerButton: {
    margin: '10px 0',
  },
});

const Login = () => {
  const classes = useStyles();
  const username = useRef('');
  const password = useRef('');
  const { login } = useContext(AuthContext);

  const loginSubmit = async (e) => {
    e.preventDefault();
    let payload = {
      username: username.current.value,
      password: password.current.value,
    };
    await login(payload);
  };

  return (
    <div className={classes.root}>
      <Grid container direction="column" alignItems="center">
        <Grid item>
          <Typography className={classes.loginTitle}>Sign in</Typography>
        </Grid>
        <Grid item>
          <form onSubmit={loginSubmit}>
            <Input
              className={classes.input}
              inputRef={username}
              name="username"
              type="text"
              fullWidth
              placeholder="Username"
              disableUnderline
            />
            <Input
              className={classes.input}
              inputRef={password}
              name="password"
              type="password"
              fullWidth
              placeholder="Password"
              disableUnderline
            />
            <button type="submit" className={classes.loginbutton}>
              Login
            </button>
          </form>
          <button className={classes.facebookbutton}>
            Log in with Facebook
          </button>
        </Grid>
        <Grid item>
          <div className={classes.registerButton}>
            <Link to="/register" className={classes.link}>
              Create your account
            </Link>
          </div>
        </Grid>
      </Grid>
    </div>
  );
};

export default Login;