sort

"use client"

import { ArrowDown } from "lucide-react"
import type * as React from "react"
import { cn } from "@/lib/utils"
import type { Material, Scheme } from "@/registry/base-nova/ui/material"
import {
  ToggleGroup,
  ToggleGroupItem,
  type ToggleGroupShow,
  type ToggleGroupSize,
} from "@/registry/base-nova/ui/toggle-group"

// One control for an order and its direction: a toggle group (its gliding highlight,
// sizes, materials and `show`), one option per order, each with its icon. The chosen
// order carries its direction after it; pressing it again flips the direction,
// pressing another order chooses that one in its natural direction.
//
//   <Sort
//     orders={[
//       { id: "date", label: "date", icon: <Clock />, say: { asc: "oldest first", desc: "newest first" } },
//       { id: "top", label: "top", icon: <Trophy />, say: { asc: "fewest votes first", desc: "most votes first" } },
//     ]}
//     value={sort}
//     onChange={setSort}
//   />
//
// Controlled only: whoever holds the list sorts it, so it holds the value. The value
// is `{ by, dir }` and nothing else; an order left and come back to starts again in
// its natural direction (the notes say why no direction is remembered per order).
// Keys are the toggle group's: one Tab stop, the arrows between orders, Space or
// Enter on the chosen one flips it.

export type SortDir = "asc" | "desc"

export type SortValue<Id extends string = string> = { by: Id; dir: SortDir }

export type SortOrder<Id extends string = string> = {
  id: Id
  /** Its name on the segment (or its tooltip, where `show` hides it), and the start
   *  of its name to a screen reader. */
  label: string
  /** What kind of order it is, read at a glance (a clock for date, a flame for
   *  hot). */
  icon: React.ReactNode
  /** The direction it is chosen in: `desc` (default), the most, the newest, the
   *  best first, which is what most orders a person picks start with. A name or a
   *  distance reads `asc`. */
  natural?: SortDir
  /** The words for each direction ("newest first"), said in its tooltip and its
   *  accessible name. Default "ascending" and "descending". */
  say?: { asc: string; desc: string }
  /** What the order means ("votes in the last day"), first in its tooltip and its
   *  description. */
  hint?: string
  /** Shown and never chosen (relevance with nothing searched). */
  disabled?: boolean
}

export type SortProps<Id extends string = string> = {
  orders: readonly SortOrder<Id>[]
  value: SortValue<Id>
  onChange: (value: SortValue<Id>) => void
  /** What each order shows (toggle-group's): `both` (default), its icon and label;
   *  `icon`, its icon alone; `selected`, its icon alone unless chosen. The chosen
   *  order's direction shows after it in all three. */
  show?: ToggleGroupShow
  size?: ToggleGroupSize
  material?: Material
  /** The colour scheme it stands in (material): default the nearest provider's. */
  scheme?: Scheme
  /** What is being ordered, for assistive tech. Default "sort by". */
  "aria-label"?: string
  className?: string
}

const SAY = { asc: "ascending", desc: "descending" } as const
const FLIP = { asc: "desc", desc: "asc" } as const

/** The direction is one plain arrow, down for descending: beside an order's own icon
 *  a second drawing of bars and an arrow (the table's header glyph) read as clutter
 *  (Adrian, 2026-10-30). A flip turns the arrow over rather than swapping it, on the
 *  toggle group's glide curve. A step dimmer than the words, brighter under the hand. */
const DIRECTION = cn(
  "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
  "opacity-60 group-hover/toggle:opacity-90",
)

const naturalOf = (order: SortOrder) => order.natural ?? "desc"

export function Sort<Id extends string>({
  orders,
  value,
  onChange,
  show,
  size,
  material,
  scheme,
  "aria-label": label = "sort by",
  className,
}: SortProps<Id>) {
  const find = (id: string) => {
    const order = orders.find((o) => o.id === id)
    if (!order)
      throw new Error(
        `Sort: "${id}" is none of the orders (${orders.map((o) => o.id).join(", ")})`,
      )
    return order
  }
  find(value.by)
  return (
    <ToggleGroup
      data-slot="sort"
      show={show}
      size={size}
      material={material}
      scheme={scheme}
      aria-label={label}
      value={value.by}
      // Another order: chosen in its natural direction. The chosen one pressed
      // again never reaches here (one, always one); its own press flips it.
      onValueChange={(id) => {
        const order = find(id)
        onChange({ by: order.id, dir: naturalOf(order) })
      }}
      className={className}
    >
      {orders.map((order) => {
        const on = order.id === value.by
        const dir = on ? value.dir : naturalOf(order)
        const words = order.say ?? SAY
        const next = words[FLIP[dir]]
        const tip = on
          ? [order.hint, `${order.label}, ${words[dir]}`, `press for ${next}`]
          : [order.hint, `${order.label}, ${words[dir]}`]
        return (
          <ToggleGroupItem
            key={order.id}
            value={order.id}
            disabled={order.disabled}
            icon={order.icon}
            tip={tip.filter(Boolean).join(" · ")}
            data-dir={dir}
            aria-label={`${order.label}, ${words[dir]}`}
            aria-description={
              [order.hint, on ? `press for ${next}` : undefined]
                .filter(Boolean)
                .join(", ") || undefined
            }
            onClick={() => {
              if (on) onChange({ by: order.id, dir: FLIP[value.dir] })
            }}
            whileChosen={
              <ArrowDown
                aria-hidden
                data-slot="sort-direction"
                className={cn(DIRECTION, dir === "asc" && "rotate-180")}
              />
            }
          >
            {order.label}
          </ToggleGroupItem>
        )
      })}
    </ToggleGroup>
  )
}