Action bar

"use client"

import * as React from "react"
import { Loader2Icon, XIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

// Sticky inside the content flow rather than fixed to the viewport: a viewport-
// centred bar draws over the sidebar at laptop widths, and does it differently
// in every collapse state. Sticky bounds the bar to the content column by
// construction. Pass "fixed" through className to opt back into the old
// behaviour when the page has no sidebar to collide with.
//
// The one shadow in the set: this bar floats over the page it edits, and the
// elevation is what says so. Everything else in Vibra sits on a hairline.
const BAR =
  "sticky z-50 mx-auto flex max-w-2xl items-center gap-3 elev-2 px-3 py-2 text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=open]:duration-(--duration-slow) data-[state=open]:ease-(--ease-emphasized)"

const POSITION = {
  bottom: "bottom-4 data-[state=open]:slide-in-from-bottom-4",
  top: "top-4 data-[state=open]:slide-in-from-top-4",
} as const

/** Which edge a floating bar docks to. */
export type ActionBarPosition = keyof typeof POSITION

export type ActionBarProps = React.ComponentProps<"div"> & {
  /** Draws nothing while false; only the bar's empty status line stays in the page, so its first message is heard. */
  open: boolean
  message?: React.ReactNode
  onSave: () => void | Promise<void>
  onDiscard: () => void
  /** Locks both buttons and spins the save button; drive it from your own mutation state. */
  saving?: boolean
  saveText?: string
  discardText?: string
  position?: ActionBarPosition
}

/** The save-or-discard bar that appears over a page with unsaved edits. */
function ActionBar({
  className,
  open,
  message = "You have unsaved changes.",
  onSave,
  onDiscard,
  saving = false,
  saveText = "Save changes",
  discardText = "Discard",
  position = "bottom",
  ...props
}: ActionBarProps) {
  return (
    <>
      {/* The status line is in the page before the bar opens: a live region
          that arrives with its words already in it is often not read out at
          all. It says the message while the bar is open — so a bar that
          appears mid-edit is heard without moving focus off the field being
          edited — and nothing while it is closed. The bar's own copy of the
          words is plain text, so they are said once. */}
      <span role="status" data-slot="action-bar-status" className="sr-only">
        {open ? message : null}
      </span>
      {open ? (
        <div
          role="region"
          aria-label="Unsaved changes"
          data-slot="action-bar"
          data-state="open"
          data-position={position}
          className={cn(BAR, POSITION[position], className)}
          {...props}
        >
          <span data-slot="action-bar-message" className="min-w-0 flex-1 truncate text-sm">
            {message}
          </span>
          <div className="flex shrink-0 items-center gap-2">
            <Button type="button" variant="ghost" size="sm" disabled={saving} onClick={onDiscard}>
              {discardText}
            </Button>
            <Button
              type="button"
              size="sm"
              disabled={saving}
              aria-busy={saving || undefined}
              onClick={() => {
                void onSave()
              }}
            >
              {/* Decoration only: the button keeps its own name, and aria-busy carries the state. */}
              {saving ? <Loader2Icon aria-hidden="true" className="animate-spin motion-reduce:animate-none in-data-[motion=reduced]:animate-none" /> : null}
              {saveText}
            </Button>
          </div>
        </div>
      ) : null}
    </>
  )
}

export type SelectionActionBarProps = React.ComponentProps<"div"> & {
  /** How many rows are selected; the bar disappears at zero, and its empty status line stays. */
  count: number
  onClear: () => void
  /** The bulk actions, usually two or three buttons. */
  children: React.ReactNode
  /** Singular noun for what is selected; the plural gets an "s". */
  itemLabel?: string
  position?: ActionBarPosition
}

/** The bulk-action bar that appears once rows in a table are selected. */
function SelectionActionBar({
  className,
  count,
  onClear,
  children,
  itemLabel = "item",
  position = "bottom",
  ...props
}: SelectionActionBarProps) {
  const summary = `${count} ${itemLabel}${count === 1 ? "" : "s"} selected`

  return (
    <>
      {/* In the page before anything is selected, so the first pick is heard
          as surely as the fourth, without moving focus away from the table;
          it says nothing while nothing is selected. The bar's own count is
          plain text, so it is said once. */}
      <span role="status" data-slot="selection-action-bar-status" className="sr-only">
        {count > 0 ? summary : null}
      </span>
      {count > 0 ? (
        <div
          role="region"
          aria-label="Selected items"
          data-slot="selection-action-bar"
          data-state="open"
          data-position={position}
          className={cn(BAR, POSITION[position], className)}
          {...props}
        >
          <span data-slot="selection-action-bar-message" className="min-w-0 flex-1 truncate text-sm tabular-nums">
            {summary}
          </span>
          <Button type="button" variant="ghost" size="icon-sm" aria-label="Clear selection" onClick={onClear}>
            <XIcon aria-hidden="true" />
          </Button>
          <div data-slot="selection-action-bar-actions" className="flex shrink-0 items-center gap-2">
            {children}
          </div>
        </div>
      ) : null}
    </>
  )
}

export { ActionBar, SelectionActionBar }