import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
import { createContext, useContext, useMemo, type ComponentProps } from "react"
import { cn } from "./utils.ts"

const DrawerContext = createContext({ showSwipeHandle: false })

export function Drawer({
  showSwipeHandle = false,
  swipeDirection = "down",
  ...props
}: DrawerPrimitive.Root.Props & { showSwipeHandle?: boolean }) {
  const value = useMemo(() => ({ showSwipeHandle }), [showSwipeHandle])
  return (
    <DrawerContext.Provider value={value}>
      <DrawerPrimitive.Root
        data-slot="drawer"
        swipeDirection={swipeDirection}
        {...props}
      />
    </DrawerContext.Provider>
  )
}

export function DrawerTrigger(props: DrawerPrimitive.Trigger.Props) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

export function DrawerContent({
  className,
  children,
  ...props
}: DrawerPrimitive.Popup.Props) {
  const { showSwipeHandle } = useContext(DrawerContext)
  return (
    <DrawerPrimitive.Portal data-slot="drawer-portal">
      <DrawerPrimitive.Backdrop
        data-slot="drawer-overlay"
        className="pmx-ui-drawer-overlay"
      />
      <DrawerPrimitive.Viewport
        data-slot="drawer-viewport"
        className="pmx-ui-drawer-viewport"
      >
        <DrawerPrimitive.Popup
          data-slot="drawer-popup"
          data-swipe-axis="y"
          className={cn("pmx-ui-drawer-popup", className)}
          {...props}
        >
          {showSwipeHandle && (
            <div data-slot="drawer-swipe-handle" aria-hidden="true" />
          )}
          <DrawerPrimitive.Content
            data-slot="drawer-content"
            className="pmx-ui-drawer-content"
          >
            {children}
          </DrawerPrimitive.Content>
        </DrawerPrimitive.Popup>
      </DrawerPrimitive.Viewport>
    </DrawerPrimitive.Portal>
  )
}

export function DrawerHeader({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="drawer-header"
      className={cn("pmx-ui-drawer-header", className)}
      {...props}
    />
  )
}

export function DrawerTitle({
  className,
  ...props
}: DrawerPrimitive.Title.Props) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn("pmx-ui-drawer-title", className)}
      {...props}
    />
  )
}

export function DrawerDescription({
  className,
  ...props
}: DrawerPrimitive.Description.Props) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn("pmx-ui-visually-hidden", className)}
      {...props}
    />
  )
}