import React, {useState} from 'react';

import {
  TextField,
  Button,
  Checkbox,
  FormControlLabel,
  Grid,
} from "@material-ui/core";

import ContentSection from "../../../components/ContentSection/ContentSection";
import {get, post} from "../../../requests";


const Registration = ({ setUser }) => {

  const [username, setUsername] = useState('');

  const handleChange = (event) => {
    setUsername(event.target.value);
  };

  const handleSubmit = () => {
    post('users/', { username })
      .then(response => {
        setUser(response.data);
      })
      .catch(err => {
        get('users/').then(response => {
          setUser(response.data.filter(user => user.username === username)[0]);
        });
      });
  };

  return (
    <ContentSection sectionName="Tell us who you are">
      <p> Choose yourself a username to track your progress and compete with others: </p>
      <Grid container direction="column">
        <Grid item>
          <TextField
            variant="outlined"
            color="secondary"
            label="Username"
            value={username}
            onChange={handleChange}
          />
        </Grid>
        <Grid item>
          <FormControlLabel
            control={<Checkbox color="secondary" />}
            label="Remember me"
          />
        </Grid>
        <Grid item>
          <Button variant="contained" color="secondary" size="large" onClick={handleSubmit}>
            Submit!
          </Button>
        </Grid>
      </Grid>

    </ContentSection>
  );
};


export default Registration;