import React, { useState } from 'react';
import { ContentSection } from 'react-benzin';
import { Link, TextField, Button, Grid } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { useAuth } from '../../hooks/useAuth';


const useStyles = makeStyles(theme => ({
  form: {
    width: theme.spacing(50),
    display: 'flex',
    flexDirection: 'column',
    '& > *': {
      margin: theme.spacing(1)
    }
  },
}));


const LoginForm: React.FC = () => {
  const classes = useStyles();
  const { login } = useAuth();
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const handleChangeUsername = (event: React.ChangeEvent<HTMLInputElement>) => {
    setUsername(event.target.value);
  };

  const handleChangePassword = (event: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const handleSubmit = () => login(username, password);

  return (
      <Grid container direction="column" spacing={2}>
        <Grid item xs={3}>
          <TextField
            onChange={handleChangeUsername}
            variant="outlined"
            label="Username"
            fullWidth
          />
        </Grid>
        <Grid item xs={3}>
          <TextField
            onChange={handleChangePassword}
            variant="outlined"
            label="Password"
            type="password"
            fullWidth
          />
        </Grid>
        <Grid item xs={3}>
          <Button
            onClick={handleSubmit}
            variant="contained"
            size="large"
            color="primary"
            fullWidth
          >
            Login
          </Button>
        </Grid>
      </Grid>
  );
};

export default LoginForm;
