import * as React from "react";
import Layout from "./Layout";
import {
  Box,
  Chip,
  Button,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  IconButton,
  TextField,
  Typography,
} from "@mui/material";
import { Delete } from "@mui/icons-material";
import { UsernameContext } from "./Login";
import { useNavigate } from "react-router-dom";
import { get, post, del } from "../fetches";

const Home = () => {
  const { username, token } = React.useContext(UsernameContext);

  const [timetables, setTimetables] = React.useState([]);
  const [newTimetableName, setNewTimetableName] = React.useState("");
  const navigator = useNavigate();

  const fetchData = async () => {
    const data = await get("/timetables");
    setTimetables(data.timetables);
  };

  React.useEffect(() => {
    fetchData();
  }, []);

  return (
    <Layout>
      {username === "admin" && (
        <Box
          sx={{
            display: "flex",
          }}
        >
          <TextField
            value={newTimetableName}
            onChange={(event) => {
              setNewTimetableName(event.target.value);
            }}
            placeholder="班表名"
          />
          <Button
            variant="contained"
            color="secondary"
            onClick={async () => {
              await post("/timetables", {
                token,
                newTimetableName,
              });
              await fetchData();
            }}
          >
            添加新班表
          </Button>
        </Box>
      )}

      <Typography>选择班表：</Typography>

      <List>
        {timetables.map(({ id, name, status }) => (
          <ListItem key={id}>
            <ListItemButton
              onClick={() => {
                navigator(`/timetable/${id}`);
              }}
            >
              <ListItemText
                sx={{ display: "flex", justifyContent: "space-between" }}
              >
                {name}
                <Chip
                  label={status ? "招募中" : "未开放"}
                  sx={{ mx: 5 }}
                  color={status ? "success" : "default"}
                />
              </ListItemText>
            </ListItemButton>
            {username === "admin" && (
              <IconButton
                onClick={async () => {
                  console.log(
                    await del(`/timetables/${id}`, {
                      token,
                    })
                  );
                  await fetchData();
                }}
              >
                <Delete />
              </IconButton>
            )}
          </ListItem>
        ))}
      </List>
    </Layout>
  );
};

export default Home;