import { useState } from "react"
import { Outlet } from "react-router-dom"
import { Content, Header, Mask, Navbar, Shell } from "./clients"

export default function AdminLayout() {
  const [navbar, setNavbar] = useState(true)

  const toggleNavbar = () => setNavbar(!navbar)
  return (
    <div className="relative h-dvh overflow-hidden">
      <Shell navbar={navbar}>
        <div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
          <Navbar navbar={navbar} setNavbar={setNavbar} />
        </div>

        <div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
          <Header navbar={navbar} toggleNavbar={toggleNavbar} />
        </div>

        <svg
          className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none"
          preserveAspectRatio="none"
        >
          <defs>
            <mask id="top-left-rounded-mask">
              <rect width="100%" height="100%" fill="white" />
              <circle cx="16" cy="16" r="16" fill="black" />
              <rect x="16" y="0" width="100%" height="32" fill="black" />
              <rect x="0" y="16" width="32" height="100%" fill="black" />
              <rect x="16" y="16" width="100%" height="100%" fill="black" />
            </mask>
          </defs>
          <rect
            width="100%"
            height="100%"
            className="fill-card"
            mask="url(#top-left-rounded-mask)"
          />
        </svg>

        <Mask navbar={navbar} setNavbar={setNavbar} />
      </Shell>

      {/* 用 Outlet 替代 {props.children} */}
      <Content navbar={navbar}>
        <Outlet />
      </Content>
    </div>
  )
}