import React from "react";
import Head from "next/head";
import Timetable from "@/components/Timetable";

export default function Home() {
  const [user, setUser] = React.useState("");
  const [begin, setBegin] = React.useState(false);

  React.useEffect(() => {
    setUser(localStorage.getItem("user") || "");
  }, []);

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {!begin && (
          <div>
            <input
              placeholder="在这输你的名字"
              value={user}
              onChange={(event) => setUser(event.target.value)}
            />
            <button
              onClick={() => {
                if (user.trim() === "") {
                  alert("姓名不能为空");
                  return;
                }
                setUser(user.trim());
                setBegin(true);
                localStorage.setItem("user", user);
              }}
            >
              Login
            </button>
          </div>
        )}
        {begin && (
          <Timetable
            user={user}
            disableConflictCheck={true}
            disableNetwork={true}
            replaceInputType={"number"}
            hideDownloadButton={false}
          />
        )}
      </main>
    </>
  );
}
