Tabs

'use client'

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

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

interface TabsContextValue {
  baseId: string
  value: string
  setValue: (value: string) => void
  orientation: Orientation
  activationMode: 'automatic' | 'manual'
}

const TabsContext = createContext<TabsContextValue | null>(null)

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

const triggerId = (baseId: string, value: string) =>
  `${baseId}-tab-${idSafe(value)}`
const panelId = (baseId: string, value: string) =>
  `${baseId}-panel-${idSafe(value)}`

type TabsValueProps =
  | { value: string; onValueChange: (value: string) => void; defaultValue?: never }
  | { defaultValue: string; onValueChange?: (value: string) => void; value?: never }

export type TabsProps = Omit<
  ComponentPropsWithRef<'div'>,
  'defaultValue' | 'onChange'
> &
  TabsValueProps & {
    orientation?: Orientation
    /** automatic: arrow keys select as they move. manual: Enter or Space selects. */
    activationMode?: 'automatic' | 'manual'
  }

/** Tabs (APG Tabs). One panel shows at a time; hidden panels stay in the DOM. */
export function Tabs({
  value,
  defaultValue,
  onValueChange,
  orientation = 'horizontal',
  activationMode = 'automatic',
  children,
  ...props
}: TabsProps) {
  const baseId = useId()
  const [current, setCurrent] = useControllableState({
    prop: value,
    defaultProp: defaultValue ?? '',
    onChange: onValueChange
  })

  return (
    <TabsContext
      value={{
        baseId,
        value: current,
        setValue: setCurrent,
        orientation,
        activationMode
      }}
    >
      <div
        {...props}
        data-scope="tabs"
        data-part="root"
        data-orientation={orientation}
      >
        {children}
      </div>
    </TabsContext>
  )
}

export function TabsList({
  onKeyDown,
  ...props
}: ComponentPropsWithRef<'div'>) {
  const { orientation, activationMode, setValue } = useTabs('TabsList')

  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    onKeyDown?.(event)
    if (event.defaultPrevented) return
    const tabs = ownItems(
      event.currentTarget,
      '[role="tab"]',
      '[data-scope="tabs"][data-part="list"]'
    )
    const index = tabs.indexOf(document.activeElement as HTMLElement)
    const next = nextIndex(event.key, index, tabs.length, orientation)
    if (next === null) return
    event.preventDefault()
    tabs[next].focus()
    if (activationMode === 'automatic' && tabs[next].dataset.value) {
      setValue(tabs[next].dataset.value)
    }
  }

  return (
    <div
      {...props}
      role="tablist"
      aria-orientation={orientation}
      data-scope="tabs"
      data-part="list"
      data-orientation={orientation}
      onKeyDown={handleKeyDown}
    />
  )
}

export interface TabsTriggerProps
  extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
  value: string
  asChild?: boolean
}

export function TabsTrigger({
  value,
  asChild,
  disabled,
  onClick,
  ...props
}: TabsTriggerProps) {
  const { baseId, value: current, setValue } = useTabs('TabsTrigger')
  const selected = current === value
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      type={asChild ? undefined : 'button'}
      {...props}
      role="tab"
      id={triggerId(baseId, value)}
      aria-selected={selected}
      aria-controls={panelId(baseId, value)}
      tabIndex={selected ? 0 : -1}
      disabled={disabled}
      data-scope="tabs"
      data-part="trigger"
      data-state={selected ? 'active' : 'inactive'}
      data-disabled={disabled ? '' : undefined}
      data-value={value}
      onClick={event => {
        onClick?.(event)
        if (!event.defaultPrevented) setValue(value)
      }}
    />
  )
}

export interface TabsPanelProps extends ComponentPropsWithRef<'div'> {
  value: string
}

export function TabsPanel({ value, ...props }: TabsPanelProps) {
  const { baseId, value: current } = useTabs('TabsPanel')
  const selected = current === value

  return (
    <div
      tabIndex={0}
      {...props}
      role="tabpanel"
      id={panelId(baseId, value)}
      aria-labelledby={triggerId(baseId, value)}
      hidden={!selected}
      data-scope="tabs"
      data-part="panel"
      data-state={selected ? 'active' : 'inactive'}
    />
  )
}

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