import React, { useState } from 'react';
import { TextField, Button, Grid } from '@material-ui/core';
import { useAuth } from '../../hooks/useAuth';
import { post } from '../../requests';


const LoginForm: React.FC = () => {
  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)
    .then(success => success || post('/users', { username, password })
      .then(() => login(username, password))
    );

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

export default LoginForm;