"use client"

import * as React from "react"

import {
  startEdgeResizeDrag,
  verticalResizeSeparatorAria,
} from "../../lib/edge-resize-handle"
import { cn } from "../../lib/utils"

/**
 * Edge resize affordance for rails outside `ResizablePanelGroup` (primary
 * sidebar, SidebarDrillIn). Matches shadcn `ResizableHandle withHandle`:
 * 1px `bg-border` + centered `h-6 w-1` pill.
 */
export function SidebarRailResizeHandle({
  widthPx,
  getWidth,
  onResizeTo,
  valueMin = 200,
  valueMax = 480,
  label = "Resize navigation panel",
  side = "end",
  className,
}: {
  /** Current panel width — drives `aria-valuenow`. */
  widthPx: number
  getWidth: () => number
  onResizeTo: (widthPx: number) => void
  valueMin?: number
  valueMax?: number
  label?: string
  /** Which edge of the rail hosts the handle. */
  side?: "start" | "end"
  className?: string
}) {
  return (
    <div
      {...verticalResizeSeparatorAria({
        label,
        valueNow: widthPx,
        valueMin,
        valueMax,
      })}
      data-slot="sidebar-rail-resize-handle"
      onMouseDown={(event) => {
        const startX = event.clientX
        const startW = getWidth()
        startEdgeResizeDrag(event, (clientX) => {
          const delta = side === "start" ? startX - clientX : clientX - startX
          onResizeTo(startW + delta)
        })
      }}
      className={cn(
        "absolute inset-y-0 z-[40] flex w-px cursor-col-resize items-center justify-center overflow-visible bg-border",
        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
        side === "end" ? "end-0" : "start-0",
        className,
      )}
    >
      <div
        className="pointer-events-none z-10 h-6 w-1 shrink-0 rounded-lg bg-border"
        aria-hidden
      />
    </div>
  )
}

/** @deprecated Prefer {@link SidebarRailResizeHandle}. */
export function SidebarDrillInResizeHandle(
  props: React.ComponentProps<typeof SidebarRailResizeHandle>,
) {
  return <SidebarRailResizeHandle {...props} />
}