import { useState } from "react";

export default function Home() {
  let [hiddenDrawer, setHiddenDrawer] = useState(true);
  return (
    <div className={""}>
      <Logo />

      <Menu
        onClickLogin={() => {
          setHiddenDrawer(!hiddenDrawer);
        }}
      />

      <Drawer
        hidden={hiddenDrawer}
        setHidden={() => {
          setHiddenDrawer(true);
        }}
      />

      <FileButton openLogin={() => setHiddenDrawer(false)} />
    </div>
  );
}

function Logo() {
  return (
    <div
      className={
        "absolute top-0 m-4 box-border h-8 w-24 cursor-pointer select-none border border-4 border-base-300 bg-white bg-base-100 text-center shadow-lg"
      }
    >
      LOGO
    </div>
  );
}

function Menu(props: { onClickLogin: () => void }) {
  return (
    <ul
      className={
        "absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-xl bg-base-200 px-12 py-4 shadow"
      }
    >
      <li
        className={"cursor-pointer select-none text-base hover:text-base-300"}
      >
        定价
      </li>
      <li
        className={"cursor-pointer select-none text-base hover:text-base-300"}
        onClick={props.onClickLogin}
      >
        注册/登录
      </li>
    </ul>
  );
}

function FileButton(props: { openLogin: () => void }) {
  return (
    <div className={"btn-group absolute top-1/2 left-1/4"}>
      <button className={"btn"}>上传文件</button>
      <button className={"btn"} onClick={props.openLogin}>
        口令下载
      </button>
    </div>
  );
}

function Drawer(props: { hidden: boolean; setHidden: () => void }) {
  return props.hidden ? (
    <></>
  ) : (
    <div className={"absolute right-0 z-0 h-screen w-screen transition-all"}>
      <div
        className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
        onClick={() => {
          console.log("hidden");
          props.setHidden();
        }}
      ></div>
      <div
        className={
          "absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100"
        }
      >
        <div className={"container mt-20 flex items-center justify-center"}>
          <LoginContent />
        </div>
      </div>
    </div>
  );
}

function LoginContent() {
  return (
    <div className={"flex bg-base-100"}>
      <label className={"label mr-5 text-base-content"}>手机号</label>
      <input className={"input input-primary"} />
    </div>
  );
}