import { NodeNextRequest } from "next/dist/server/base-http/node";
import React from "react";

const UserInputWrap = ({ children, setUser }) => {
  const [inputUser, setInputUser] = React.useState("");
  const [begin, setBegin] = React.useState(false);

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

  return (
    <>
      {!begin && (
        <div
          style={{
            display: "grid",
            placeItems: "center",
            alignItems: "center",
            minHeight: "100vh",
          }}
        >
          <div>
            <input
              style={{
                margin: "0.5em",
                padding: "0.5em",
                borderRadius: "0.39em",
              }}
              placeholder="你的名字..."
              value={inputUser}
              onChange={(event) => setInputUser(event.target.value)}
              size={10}
            />
            <button
              style={{
                margin: "0.5em",
                padding: "0.5em",
                backgroundColor: "#39ceff",
              }}
              onClick={() => {
                if (inputUser.trim() === "") {
                  alert("姓名不能为空");
                  return;
                }
                setUser(inputUser.trim());
                setBegin(true);
                localStorage.setItem("user", inputUser.trim());
              }}
            >
              Login
            </button>
          </div>
        </div>
      )}
      {begin && children}
    </>
  );
};

export default UserInputWrap;