Dialog

'use client'

import {
  createContext,
  use,
  useEffect,
  useId,
  useRef,
  type ComponentPropsWithRef,
  type MouseEvent,
  type RefObject
} from 'react'

import { Slot } from './slot'
import { useComposedRefs } from './sui-refs'
import { useControllableState } from './sui-use-controllable-state'

interface DialogContextValue {
  open: boolean
  setOpen: (open: boolean) => void
  triggerRef: RefObject<HTMLButtonElement | null>
  contentId: string
  titleId: string
  descriptionId: string
}

const DialogContext = createContext<DialogContextValue | null>(null)

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

export interface DialogProps {
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (open: boolean) => void
  children?: React.ReactNode
}

/**
 * A modal dialog (APG Dialog). Built on the native <dialog> element with
 * showModal(), so the browser keeps focus inside, makes the page inert and
 * closes it on Esc. Focus returns to the trigger on close. Give it a
 * <DialogTitle> and a <DialogDescription>; they name and describe it.
 */
export function Dialog({
  open,
  defaultOpen = false,
  onOpenChange,
  children
}: DialogProps) {
  const [isOpen, setOpen] = useControllableState({
    prop: open,
    defaultProp: defaultOpen,
    onChange: onOpenChange
  })
  const triggerRef = useRef<HTMLButtonElement | null>(null)
  const id = useId()

  return (
    <DialogContext
      value={{
        open: isOpen,
        setOpen,
        triggerRef,
        contentId: `${id}-content`,
        titleId: `${id}-title`,
        descriptionId: `${id}-description`
      }}
    >
      {children}
    </DialogContext>
  )
}

export function DialogTrigger({
  asChild,
  onClick,
  ref,
  ...props
}: ComponentPropsWithRef<'button'> & { asChild?: boolean }) {
  const { open, setOpen, triggerRef, contentId } = useDialog('DialogTrigger')
  const composedRef = useComposedRefs(ref, triggerRef)
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      type={asChild ? undefined : 'button'}
      {...props}
      ref={composedRef}
      aria-haspopup="dialog"
      aria-expanded={open}
      aria-controls={contentId}
      data-scope="dialog"
      data-part="trigger"
      data-state={open ? 'open' : 'closed'}
      onClick={(event: MouseEvent<HTMLButtonElement>) => {
        onClick?.(event)
        if (!event.defaultPrevented) setOpen(true)
      }}
    />
  )
}

export function DialogContent({
  onClick,
  ref,
  ...props
}: ComponentPropsWithRef<'dialog'>) {
  const { open, setOpen, triggerRef, contentId, titleId, descriptionId } =
    useDialog('DialogContent')
  const dialogRef = useRef<HTMLDialogElement | null>(null)
  const composedRef = useComposedRefs(ref, dialogRef)

  useEffect(() => {
    const dialog = dialogRef.current
    if (!dialog) return
    if (open && !dialog.open) dialog.showModal()
    if (!open && dialog.open) {
      dialog.close()
      triggerRef.current?.focus()
    }
  }, [open, triggerRef])

  return (
    <dialog
      {...props}
      ref={composedRef}
      id={contentId}
      aria-labelledby={titleId}
      aria-describedby={descriptionId}
      data-scope="dialog"
      data-part="content"
      data-state={open ? 'open' : 'closed'}
      /* Esc: keep React in charge of the open state. */
      onCancel={event => {
        event.preventDefault()
        setOpen(false)
      }}
      /* A form with method="dialog", or dialog.close() from elsewhere. */
      onClose={() => {
        if (open) setOpen(false)
      }}
      onClick={event => {
        onClick?.(event)
        if (event.defaultPrevented || event.target !== event.currentTarget) return
        /* A click on the dialog element itself outside its box is the backdrop. */
        const box = event.currentTarget.getBoundingClientRect()
        const inside =
          event.clientX >= box.left &&
          event.clientX <= box.right &&
          event.clientY >= box.top &&
          event.clientY <= box.bottom
        if (!inside) setOpen(false)
      }}
    />
  )
}

export function DialogTitle(props: ComponentPropsWithRef<'h2'>) {
  const { titleId } = useDialog('DialogTitle')
  return <h2 {...props} id={titleId} data-scope="dialog" data-part="title" />
}

export function DialogDescription(props: ComponentPropsWithRef<'p'>) {
  const { descriptionId } = useDialog('DialogDescription')
  return (
    <p {...props} id={descriptionId} data-scope="dialog" data-part="description" />
  )
}

export function DialogClose({
  asChild,
  onClick,
  ...props
}: ComponentPropsWithRef<'button'> & { asChild?: boolean }) {
  const { setOpen } = useDialog('DialogClose')
  const Comp = asChild ? Slot : 'button'
  return (
    <Comp
      type={asChild ? undefined : 'button'}
      {...props}
      data-scope="dialog"
      data-part="close"
      onClick={(event: MouseEvent<HTMLButtonElement>) => {
        onClick?.(event)
        if (!event.defaultPrevented) setOpen(false)
      }}
    />
  )
}

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
}