Accordion

'use client'

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

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

interface AccordionContextValue {
  open: string[]
  toggle: (value: string) => void
}

interface ItemContextValue {
  open: boolean
  disabled: boolean
  triggerId: string
  panelId: string
  value: string
}

const AccordionContext = createContext<AccordionContextValue | null>(null)
const ItemContext = createContext<ItemContextValue | null>(null)

const useAccordion = (part: string) => {
  const context = use(AccordionContext)
  if (!context) throw new Error(`<${part}> must be used inside <Accordion>`)
  return context
}
const useItem = (part: string) => {
  const context = use(ItemContext)
  if (!context) throw new Error(`<${part}> must be used inside <AccordionItem>`)
  return context
}

export interface AccordionProps
  extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
  /** single: opening one item closes the others. multiple: items are independent. */
  type?: 'single' | 'multiple'
  value?: string[]
  defaultValue?: string[]
  onValueChange?: (value: string[]) => void
}

/**
 * An accordion (APG Accordion). Each header holds a button that shows or
 * hides its panel. Up, Down, Home and End move between headers.
 */
export function Accordion({
  type = 'single',
  value,
  defaultValue = [],
  onValueChange,
  ...props
}: AccordionProps) {
  const [open, setOpen] = useControllableState({
    prop: value,
    defaultProp: defaultValue,
    onChange: onValueChange
  })

  const toggle = (item: string) => {
    if (open.includes(item)) setOpen(open.filter(v => v !== item))
    else setOpen(type === 'single' ? [item] : [...open, item])
  }

  return (
    <AccordionContext value={{ open, toggle }}>
      <div {...props} data-scope="accordion" data-part="root" />
    </AccordionContext>
  )
}

export interface AccordionItemProps extends ComponentPropsWithRef<'div'> {
  value: string
  disabled?: boolean
}

export function AccordionItem({
  value,
  disabled = false,
  ...props
}: AccordionItemProps) {
  const { open } = useAccordion('AccordionItem')
  const id = useId()
  const isOpen = open.includes(value)

  return (
    <ItemContext
      value={{
        open: isOpen,
        disabled,
        triggerId: `${id}-trigger`,
        panelId: `${id}-panel`,
        value
      }}
    >
      <div
        {...props}
        data-scope="accordion"
        data-part="item"
        data-state={isOpen ? 'open' : 'closed'}
        data-disabled={disabled ? '' : undefined}
      />
    </ItemContext>
  )
}

/** An h3 by default. Use asChild to render another heading level. */
export function AccordionHeader({
  asChild,
  ...props
}: ComponentPropsWithRef<'h3'> & { asChild?: boolean }) {
  const { open } = useItem('AccordionHeader')
  const Comp = asChild ? Slot : 'h3'
  return (
    <Comp
      {...props}
      data-scope="accordion"
      data-part="header"
      data-state={open ? 'open' : 'closed'}
    />
  )
}

export function AccordionTrigger({
  onClick,
  onKeyDown,
  ...props
}: ComponentPropsWithRef<'button'>) {
  const { toggle } = useAccordion('AccordionTrigger')
  const { open, disabled, triggerId, panelId, value } = useItem('AccordionTrigger')

  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
    onKeyDown?.(event)
    if (event.defaultPrevented) return
    const root = event.currentTarget.closest<HTMLElement>(
      '[data-scope="accordion"][data-part="root"]'
    )
    if (!root) return
    const triggers = ownItems(
      root,
      '[data-scope="accordion"][data-part="trigger"]',
      '[data-scope="accordion"][data-part="root"]'
    )
    const next = nextIndex(
      event.key,
      triggers.indexOf(event.currentTarget),
      triggers.length,
      'vertical'
    )
    if (next === null) return
    event.preventDefault()
    triggers[next].focus()
  }

  return (
    <button
      type="button"
      {...props}
      id={triggerId}
      aria-expanded={open}
      aria-controls={panelId}
      disabled={disabled}
      data-scope="accordion"
      data-part="trigger"
      data-state={open ? 'open' : 'closed'}
      data-disabled={disabled ? '' : undefined}
      onClick={event => {
        onClick?.(event)
        if (!event.defaultPrevented) toggle(value)
      }}
      onKeyDown={handleKeyDown}
    />
  )
}

export function AccordionPanel(props: ComponentPropsWithRef<'div'>) {
  const { open, triggerId, panelId } = useItem('AccordionPanel')
  return (
    <div
      {...props}
      role="region"
      id={panelId}
      aria-labelledby={triggerId}
      hidden={!open}
      data-scope="accordion"
      data-part="panel"
      data-state={open ? 'open' : 'closed'}
    />
  )
}

import {
  Children,
  cloneElement,
  isValidElement,
  type CSSProperties,
  type ReactElement,
  type ReactNode,
  type Ref
} from 'react'

import { composeRefs } from './sui-refs'

type AnyProps = Record<string, unknown>

/**
 * Renders its only child with the slot's props merged in, so any component
 * can take over the element (`asChild`). Event handlers run child first,
 * then the slot's, unless the child's handler called preventDefault.
 * Class names join, styles merge, refs compose. No hooks, so it works in
 * server components too.
 */
export function Slot({
  children,
  ...slotProps
}: AnyProps & { children?: ReactNode; ref?: Ref<unknown> }) {
  const child = Children.only(children)
  if (!isValidElement(child)) return null
  const element = child as ReactElement<AnyProps>
  const childProps = element.props

  const merged: AnyProps = { ...slotProps, ...childProps }

  for (const key of Object.keys(slotProps)) {
    const slotValue = slotProps[key]
    const childValue = childProps[key]
    if (/^on[A-Z]/.test(key) && typeof slotValue === 'function') {
      merged[key] =
        typeof childValue === 'function'
          ? (...args: unknown[]) => {
              childValue(...args)
              const event = args[0] as { defaultPrevented?: boolean } | undefined
              if (!event?.defaultPrevented) slotValue(...args)
            }
          : slotValue
    } else if (key === 'className') {
      merged.className = [slotValue, childValue].filter(Boolean).join(' ')
    } else if (key === 'style') {
      merged.style = {
        ...(slotValue as CSSProperties),
        ...(childValue as CSSProperties)
      }
    }
  }

  /* Only touch the ref when there is one: a server component rendering
     <Slot><Link /></Slot> must not hand a function ref to a client child. */
  const slotRef = slotProps.ref as Ref<unknown> | undefined
  const childRef = childProps.ref as Ref<unknown> | undefined
  if (slotRef && childRef) merged.ref = composeRefs(slotRef, childRef)
  else if (slotRef || childRef) merged.ref = slotRef ?? childRef
  else delete merged.ref

  return cloneElement(element, merged)
}

import { useCallback, type Ref, type RefCallback } from 'react'

const setRef = <T,>(ref: Ref<T> | undefined, value: T | null) => {
  if (typeof ref === 'function') ref(value)
  else if (ref) ref.current = value
}

/** One callback ref that feeds several refs. */
export const composeRefs =
  <T,>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>
  node => {
    for (const ref of refs) setRef(ref, node)
  }

/** A user's ref and a component's own ref, as one stable callback ref. */
export const useComposedRefs = <T,>(
  outer: Ref<T> | undefined,
  inner: Ref<T> | undefined
) => useCallback((node: T | null) => composeRefs(outer, inner)(node), [outer, inner])

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, '_')