import { forwardRef } from "react";
import type { ButtonHTMLAttributes } from "react";
import clsx from "clsx";
import { GripVertical } from "lucide-react";

// The grip a sortable row is dragged by. The caller spreads its sortable `attributes` and `listeners`
// onto it. `label` names the row it moves: a screen reader that hears a bare "reorder" on every row
// cannot tell which one it is on.
//
// Unavailable (under a sort or a filter, say) it stays focusable, keeps its tooltip and lets the label
// say why: native `disabled` would drop it from the tab order and suppress the tooltip, so the reason
// would reach nobody. The caller also leaves its `listeners` off, so nothing can start a drag.
export const DragHandle = forwardRef<
  HTMLButtonElement,
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & {
    label: string;
    unavailable?: boolean;
  }
>(function DragHandle({ label, unavailable = false, className, onClick, ...rest }, ref) {
  return (
    <button
      ref={ref}
      type="button"
      {...rest}
      aria-label={label}
      title={label}
      aria-disabled={unavailable || undefined}
      onClick={(e) => (unavailable ? e.preventDefault() : onClick?.(e))}
      className={clsx(
        "inline-grid size-7 shrink-0 touch-none place-items-center rounded-lg text-muted transition touch-target [&>svg]:size-4",
        unavailable
          ? "cursor-not-allowed opacity-30"
          : "cursor-grab state-layer hover:text-fg active:cursor-grabbing",
        className,
      )}
    >
      <GripVertical />
    </button>
  );
});