'use client'
import {ReactNode} from 'react'
import {useLayoutStore} from '@/components/stores-provider'
import {merge} from '@/lib/utils'

type AdminLayoutProps = {
  navbar: ReactNode
  header: ReactNode
  children: ReactNode
}

export default function Layout(props: AdminLayoutProps) {
  const navbar = useLayoutStore(store => store.navbar)
  const setNevBar = useLayoutStore(store => store.setNavbar)

  return (
    <div className="relative h-dvh overflow-hidden">

      {/* 结构 */}
      <div
        data-expand={navbar}
        className={merge(
          `transition-[grid-template-columns] duration-300 ease-in-out`,
          `w-full h-full grid`,
          `grid-rows-[64px_1fr]`,
          `data-[expand=true]:grid-cols-[200px_1fr]`,
          `data-[expand=false]:grid-cols-[0px_1fr]`,
          `md:data-[expand=false]:grid-cols-[64px_1fr]`,
        )}
      >
        <div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
          {props.navbar}
        </div>

        <div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
          {props.header}
        </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>

        {/* 遮罩层 */}
        <div
          data-expand={navbar}
          className={merge(
            `lg:hidden`,
            `transition-opacity duration-300 ease-in-out`,
            `col-start-1 row-start-1 col-span-2 row-span-2 bg-black/50 z-10`,
            `data-[expand=true]:opacity-100 data-[expand=false]:opacity-0`,
            `data-[expand=true]:pointer-events-auto data-[expand=false]:pointer-events-none`,
          )}
          onClick={() => setNevBar(false)}
        >
        </div>
      </div>

      {/* 内容 */}
      <div
        data-expand={navbar}
        className={merge(
          `transition-[margin] duration-300 ease-in-out`,
          `absolute inset-0 overflow-hidden`,
          `mt-16`,
          `md:ml-16`,
          `lg:data-[expand=true]:ml-[200px]`,
        )}>
        {props.children}
      </div>
    </div>
  )
}
