import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import {
  Alert,
  Button,
  TextField,
  Stack,
  InputField,
  Box,
  Snackbar,
  Container,
} from "@mui/material";

export default function Index(props) {
  const [username, setUsername] = useState("");
  const [snackbarOpen, setSnackbarOpen] = useState(false);

  // get username from localStorage
  useEffect(() => {
    const localUsername = localStorage.getItem("username");
    if (localUsername) {
      setUsername(localUsername);
    }
  }, []);

  const router = useRouter();

  const login = () => {
    if (!username) {
      setSnackbarOpen(true);
      return;
    }
    // set local storage
    localStorage.setItem("username", username);
    props.setUsername(username);
  };

  useEffect(() => {
    if (props.username) {
      router.push("/time");
    }
  }, [props.username]);

  return (
    <Container>
      <Stack direction="row" spacing={2}>
        <TextField
          label="您的大名？"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          onKeyUp={(e) => {
            if (e.key === "Enter") {
              login();
            }
          }}
        />
        <Link href="/time" passHref>
          <Button
            variant="contained"
            color="primary"
            onClick={(e) => {
              e.preventDefault();
              login();
            }}
          >
            登入
          </Button>
        </Link>
      </Stack>
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={1000}
        onClose={() => setSnackbarOpen(false)}
      >
        <Alert variant="filled" severity="error">
          请输入您的大名
        </Alert>
      </Snackbar>
    </Container>
  );
}