import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Toolbar from "@mui/material/Toolbar";
import Paper from "@mui/material/Paper";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MainHeader from "../components/MainHeader";
import Grid from "@mui/material/Grid";
import { TextField } from "@mui/material";
import { useState } from "react";
import axios from "axios";
import { useHistory } from "react-router";

export default function UsernameForm() {
  const [username, setUsername] = useState("");
  const history = useHistory();

  function handleField(e) {
    setUsername(e.target.value);
  }

  function handleStart() {
    axios("http://localhost:8000/init/", {
      method: "POST",
      withCredentials: true,
      data: { username: username },
    })
      .then((r) => history.push(`/play`))
      .catch((err) => {
        console.log(err.response);
      });
  }

  return (
    <div>
      <MainHeader />
      <Container maxWidth="xs">
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            mt: "32vh",
          }}
        >
          <Typography variant="h4">Enter your nickname</Typography>
          <Grid
            container
            alignItems="center"
            justifyContent="center"
            spacing={2}
            sx={{ marginTop: 1 }}
          >
            <Grid item xs={12} md={9}>
              <TextField
                fullWidth
                id="username"
                label="Username"
                value={username}
                onChange={handleField}
              />
            </Grid>
            <Grid item xs={12} md={3}>
              <Button
                sx={{ height: 54 }}
                fullWidth
                variant="contained"
                size="large"
                onClick={handleStart}
              >
                Next
              </Button>
            </Grid>
          </Grid>
        </Box>
      </Container>
    </div>
  );
}
