"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import { Label } from "./label"
import { RadioGroup, RadioGroupItem } from "./radio-group"

/**
 * `RadioControl` is replacement for `@wordpress/components`' `RadioControl` -
 * **7 live usages across 4 files**.
 *
 * AN ADAPTER, NOT A RENAME. WP hands `onChange` the SELECTED VALUE, never the event:
 *
 * <RadioControl selected={bookingModeForm} options={...} onChange={(value) => setBookingModeForm(value)} />
 *
 * Radix hands `onValueChange` the value too, so the prop keeps WP's NAME purely so the call sites do
 * not have to change.
 *
 * `selected` is WP's name for the group's value, and `options` is WP's array. Both are reproduced
 * rather than renamed to Radix's `value` and a hand-written list of items, which is what keeps each
 * conversion a one-line import swap.
 *
 * `value` IS ALSO ACCEPTED, as a fallback for `selected`. One site spreads a react-hook-form
 * `{...field}`, which supplies `value` and no `selected` at all. Under WP that spread landed on
 * every radio input at once and overwrote each one's own value, so nothing was ever selected there;
 * reading it as the group's value is what that call site was reaching for.
 *
 * The group label is a `<span>` wired with `aria-labelledby`, not a `<label>`: a radio group is
 * labelled as a group, and only the individual radios take a `<label for=...>`.
 *
 * `__nextHasNoMarginBottom` is deliberately NOT accepted, the same ruling made for
 * `ui/input-control` and `ui/toggle-control`. Call sites drop it.
 */

export interface RadioControlOption {
  label: string
  value: string
  disabled?: boolean
}

export interface RadioControlProps
  extends Omit<
    React.ComponentProps<typeof RadioGroup>,
    "onChange" | "onValueChange" | "value" | "defaultValue" | "children"
  > {
  label?: React.ReactNode
  help?: React.ReactNode
  options?: RadioControlOption[]
  selected?: string
  /** Fallback for `selected`, for the site that spreads a react-hook-form field. */
  value?: string
  /** WP's contract: the SELECTED VALUE, not the event. */
  onChange?: (value: string) => void
}

function RadioControl({
  label,
  help,
  options = [],
  selected,
  value,
  onChange,
  className,
  id,
  ...props
}: RadioControlProps) {
  // Generated ids tie each radio to its own <label for=...> and the group to its own name.
  // useId emits colons, which are invalid in a CSS selector, so they are stripped.
  const generated = React.useId().replace(/:/g, "")
  const groupId = id ?? `radio-control-${generated}`
  const labelId = label ? `${groupId}-label` : undefined
  const helpId = help ? `${groupId}-help` : undefined

  return (
    <div data-slot="radio-control" className="w-full">
      {label && (
        <span
          data-slot="radio-control-label"
          id={labelId}
          className="mb-2 block text-sm font-medium"
        >
          {label}
        </span>
      )}

      <RadioGroup
        id={groupId}
        aria-labelledby={labelId}
        aria-describedby={helpId}
        value={selected ?? value ?? ""}
        onValueChange={onChange}
        className={cn("gap-2", className)}
        {...props}
      >
        {options.map((option, index) => {
          // Keyed off the index rather than the value, because an option value can be any code the
          // server sends and does not have to be safe in an id.
          const optionId = `${groupId}-${index}`
          return (
            <div key={optionId} className="flex items-start gap-2">
              <RadioGroupItem
                id={optionId}
                value={option.value}
                disabled={option.disabled}
                className="mt-0.5"
              />
              <Label htmlFor={optionId} className="font-normal leading-snug">
                {option.label}
              </Label>
            </div>
          )
        })}
      </RadioGroup>

      {help && (
        <p
          data-slot="radio-control-help"
          id={helpId}
          className="mt-2 text-sm text-ink-muted"
        >
          {help}
        </p>
      )}
    </div>
  )
}

export { RadioControl }