Radio Group

'use client'

import {
  createContext,
  use,
  type ComponentPropsWithRef,
  type KeyboardEvent
} from 'react'

import { useControllableState } from './sui-use-controllable-state'
import { nextIndex, ownItems, type Orientation } from './sui-keyboard'

interface RadioGroupContextValue {
  value: string
  setValue: (value: string) => void
  disabled: boolean
}

const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
const ItemContext = createContext<'checked' | 'unchecked'>('unchecked')

const useRadioGroup = (part: string) => {
  const context = use(RadioGroupContext)
  if (!context) throw new Error(`<${part}> must be used inside <RadioGroup>`)
  return context
}

export interface RadioGroupProps
  extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
  /** Adds a hidden input so the value submits with a form. */
  name?: string
  disabled?: boolean
  orientation?: Orientation
}

/**
 * A radio group (APG Radio Group). Tab enters on the checked item, and all
 * four arrow keys move and select, wrapping at the ends. Put the label
 * text inside each <RadioGroupItem>, and name the group with aria-label or
 * aria-labelledby.
 */
export function RadioGroup({
  value,
  defaultValue = '',
  onValueChange,
  name,
  disabled = false,
  orientation,
  onKeyDown,
  children,
  ...props
}: RadioGroupProps) {
  const [current, setCurrent] = useControllableState({
    prop: value,
    defaultProp: defaultValue,
    onChange: onValueChange
  })

  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    onKeyDown?.(event)
    if (event.defaultPrevented || disabled) return
    const radios = ownItems(
      event.currentTarget,
      '[role="radio"]',
      '[data-scope="radio-group"][data-part="root"]'
    )
    const index = radios.indexOf(document.activeElement as HTMLElement)
    /* Home and End are not part of the radio pattern. */
    if (event.key === 'Home' || event.key === 'End') return
    const next = nextIndex(event.key, index, radios.length, 'both')
    if (next === null) return
    event.preventDefault()
    radios[next].focus()
    if (radios[next].dataset.value) setCurrent(radios[next].dataset.value)
  }

  return (
    <RadioGroupContext value={{ value: current, setValue: setCurrent, disabled }}>
      <div
        {...props}
        role="radiogroup"
        aria-orientation={orientation}
        aria-disabled={disabled || undefined}
        data-scope="radio-group"
        data-part="root"
        data-orientation={orientation}
        data-disabled={disabled ? '' : undefined}
        onKeyDown={handleKeyDown}
      >
        {children}
        {name && <input type="hidden" name={name} value={current} />}
      </div>
    </RadioGroupContext>
  )
}

export interface RadioGroupItemProps
  extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
  value: string
}

export function RadioGroupItem({
  value,
  disabled: itemDisabled,
  onClick,
  onKeyDown,
  children,
  ...props
}: RadioGroupItemProps) {
  const { value: current, setValue, disabled: groupDisabled } =
    useRadioGroup('RadioGroupItem')
  const disabled = groupDisabled || itemDisabled
  const checked = current === value
  const state = checked ? 'checked' : 'unchecked'
  /* With nothing checked yet, every item stays reachable by Tab. */
  const tabIndex = checked || current === '' ? 0 : -1

  return (
    <ItemContext value={state}>
      <button
        type="button"
        {...props}
        role="radio"
        aria-checked={checked}
        tabIndex={tabIndex}
        disabled={disabled}
        data-scope="radio-group"
        data-part="item"
        data-state={state}
        data-disabled={disabled ? '' : undefined}
        data-value={value}
        onClick={event => {
          onClick?.(event)
          if (!event.defaultPrevented) setValue(value)
        }}
        onKeyDown={event => {
          onKeyDown?.(event)
          /* Enter submits forms; it never checks a radio. */
          if (event.key === 'Enter') event.preventDefault()
        }}
      >
        {children}
      </button>
    </ItemContext>
  )
}

/** The drawn circle. Purely visual; state comes from the item. */
export function RadioGroupIndicator(props: ComponentPropsWithRef<'span'>) {
  const state = use(ItemContext)
  return (
    <span
      aria-hidden="true"
      {...props}
      data-scope="radio-group"
      data-part="indicator"
      data-state={state}
    />
  )
}

import { useCallback, useState } from 'react'

/**
 * Controlled when `prop` is defined, uncontrolled otherwise. `onChange`
 * fires for every change either way.
 */
export function useControllableState<T>({
  prop,
  defaultProp,
  onChange
}: {
  prop: T | undefined
  defaultProp: T
  onChange?: (value: T) => void
}) {
  const [uncontrolled, setUncontrolled] = useState(defaultProp)
  const controlled = prop !== undefined
  const value = controlled ? prop : uncontrolled

  const setValue = useCallback(
    (next: T) => {
      if (!controlled) setUncontrolled(next)
      if (!Object.is(next, value)) onChange?.(next)
    },
    [controlled, onChange, value]
  )

  return [value, setValue] as const
}

import { useRef } from 'react'

export type Orientation = 'horizontal' | 'vertical'

/**
 * The next index for a list navigated with arrow keys, Home and End, or
 * null when the key is not a navigation key. Lists wrap, as the APG
 * patterns used here recommend. `both` accepts all four arrows (radio).
 */
export function nextIndex(
  key: string,
  current: number,
  count: number,
  orientation: Orientation | 'both'
): number | null {
  if (count === 0) return null
  const forward =
    (orientation !== 'horizontal' && key === 'ArrowDown') ||
    (orientation !== 'vertical' && key === 'ArrowRight')
  const backward =
    (orientation !== 'horizontal' && key === 'ArrowUp') ||
    (orientation !== 'vertical' && key === 'ArrowLeft')

  if (key === 'Home') return 0
  if (key === 'End') return count - 1
  if (forward) return current < 0 ? 0 : (current + 1) % count
  if (backward) return current < 0 ? count - 1 : (current - 1 + count) % count
  return null
}

/**
 * Items that belong to this container, skipping disabled ones and any that
 * sit inside a nested instance of the same component.
 */
export function ownItems(
  container: HTMLElement,
  itemSelector: string,
  containerSelector: string
): HTMLElement[] {
  return Array.from(container.querySelectorAll<HTMLElement>(itemSelector)).filter(
    el =>
      el.closest(containerSelector) === container &&
      !el.hasAttribute('disabled') &&
      el.getAttribute('aria-disabled') !== 'true'
  )
}

/**
 * Typeahead: printable keys typed within half a second build a search
 * string, and the first matching label after the current item wins.
 */
export function useTypeahead() {
  const buffer = useRef('')
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)

  return (key: string, labels: string[], current: number): number | null => {
    if (key.length !== 1 || key === ' ') return null
    clearTimeout(timer.current)
    timer.current = setTimeout(() => (buffer.current = ''), 500)
    buffer.current += key.toLowerCase()

    const search = buffer.current
    const repeated = search.split('').every(char => char === search[0])
    const query = repeated ? search[0] : search
    const start = repeated ? current + 1 : current
    for (let i = 0; i < labels.length; i++) {
      const index = (start + i + labels.length) % labels.length
      if (labels[index].trim().toLowerCase().startsWith(query)) return index
    }
    return null
  }
}

/** Makes a value safe to use inside an id attribute. */
export const idSafe = (value: string) => value.replace(/[^\w-]/g, '_')