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>
          <input
            placeholder="在这输你的名字"
            value={inputUser}
            onChange={(event) => setInputUser(event.target.value)}
          />
          <button
            onClick={() => {
              if (inputUser.trim() === "") {
                alert("姓名不能为空");
                return;
              }
              setUser(inputUser.trim());
              setBegin(true);
              localStorage.setItem("user", inputUser.trim());
            }}
          >
            Login
          </button>
        </div>
      )}
      {begin && children}
    </>
  );
};

export default UserInputWrap;