import * as React from "react";
import { UsernameContext } from "./Login";
import { useLocation, useNavigate } from "react-router-dom";
import {
  CssBaseline,
  Container,
  Toolbar,
  AppBar,
  Typography,
  Button,
  Paper,
} from "@mui/material";

const LogoutButton = ({ username, setUsername }) => {
  const text = username ? `${username} (点击登出)` : "登陆";
  const navigator = useNavigate();
  return (
    <Button
      variant="contained"
      color="secondary"
      onClick={() => {
        if (username) {
          setUsername("");
        }
        navigator("/login");
      }}
    >
      {text}
    </Button>
  );
};

const Layout = ({ children }) => {
  const locat = useLocation();
  const navigator = useNavigate();
  const { username, setUsername } = React.useContext(UsernameContext);
  React.useEffect(() => {
    if (!username) {
      const { pathname } = locat;
      if (pathname !== "/login") {
        navigator(`/login?redir=${pathname}`);
      }
    }
  }, []);
  return (
    <>
      <header>
        <CssBaseline />
        <AppBar position="relative">
          <Toolbar>
            <Typography sx={{ flexGrow: 1 }} variant="h6">
              ITSC
            </Typography>
            <LogoutButton username={username} setUsername={setUsername} />
          </Toolbar>
        </AppBar>
      </header>

      <main>
        <Container maxWidth="sm" sx={{ mt: 3 }}>
          <Paper sx={{ p: 2 }}>{children}</Paper>
        </Container>
      </main>

      <footer></footer>
    </>
  );
};

export default Layout;