"use client"

import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "../../lib/utils"

function ResizablePanelGroup({
  className,
  ...props
}: ResizablePrimitive.GroupProps) {
  return (
    <ResizablePrimitive.Group
      data-slot="resizable-panel-group"
      className={cn(
        "flex h-full w-full aria-[orientation=vertical]:flex-col",
        className
      )}
      {...props}
    />
  )
}

function ResizablePanel({
  className,
  style,
  ...props
}: ResizablePrimitive.PanelProps) {
  // Fill the panel; keep overflow visible so a `withHandle` pill (wider than the
  // 1px separator) is not clipped by neighboring panels.
  return (
    <ResizablePrimitive.Panel
      data-slot="resizable-panel"
      className={cn("h-full min-h-0 w-full min-w-0 overflow-visible", className)}
      style={{
        height: "100%",
        width: "100%",
        overflow: "visible",
        ...style,
      }}
      {...props}
    />
  )
}

/**
 * shadcn radix-nova `ResizableHandle` — 1px `bg-border` line; `withHandle`
 * shows the centered pill (`h-6 w-1 rounded-lg`).
 *
 * `stickyGrip` is an Exxat extension for tall page-scroll split hubs.
 */
function ResizableHandle({
  withHandle,
  stickyGrip = false,
  className,
  ...props
}: ResizablePrimitive.SeparatorProps & {
  withHandle?: boolean
  stickyGrip?: boolean
}) {
  return (
    <ResizablePrimitive.Separator
      data-slot="resizable-handle"
      className={cn(
        "relative z-50 flex w-px items-center justify-center overflow-visible bg-border ring-offset-background",
        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
        "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden",
        "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full",
        "aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1",
        "aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0",
        "aria-[orientation=horizontal]:after:-translate-y-1/2",
        "[&[aria-orientation=horizontal]>div]:rotate-90",
        stickyGrip && "items-start",
        className
      )}
      {...props}
    >
      {withHandle ? (
        <div
          className={cn(
            "pointer-events-none z-10 h-6 w-1 shrink-0 rounded-lg bg-border",
            stickyGrip &&
              "sticky top-[calc(var(--shell-utility-bar-height)+5.5rem)]",
          )}
        />
      ) : null}
    </ResizablePrimitive.Separator>
  )
}

export { ResizableHandle, ResizablePanel, ResizablePanelGroup }