"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./select"

/**
 * `SelectControl` is replacement for `@wordpress/components`' `SelectControl` -
 * **21 live usages across 13 files**.
 *
 * AN ADAPTER, NOT A RENAME, for two reasons.
 *
 * 1. `onChange` gets the VALUE. WP does not hand its handler a change event:
 *
 * <SelectControl value={dueMode} options={dueOptions} onChange={(value) => setDueMode(value)} />
 *
 * Radix hands `onValueChange` the value too, so the prop keeps WP's NAME purely so the call sites
 * do not have to change. WP also passes a second `{ event }` argument; Radix has no event to give
 * and no call site reads one, so the signature stops at the value rather than promising an event
 * that would always be undefined.
 *
 * 2. THE EMPTY OPTION. WP renders a native `<select>`, so `{ label: 'All locations', value: '' }` is
 * an ordinary choice - and 11 of the 21 call sites open their list with exactly that. Radix
 * reserves the empty string to mean "nothing is selected" and THROWS on an item that uses it.
 * So the empty string is swapped for a private sentinel on the way in and swapped back on the way
 * out, and the call site still sees the `''` it wrote. This is the whole reason this cannot be a
 * rename, and doing it at 11 call sites instead would be 11 chances to spell it differently.
 *
 * `options`, `label` and `help` are WP's and have no Radix equivalent, so they are reproduced here.
 * `hideLabelFromVision` keeps the label for screen readers only - two sites use it for a select that
 * reads as a menu.
 *
 * `__nextHasNoMarginBottom` and `__next40pxDefaultSize` are deliberately NOT accepted, the same
 * ruling made for `ui/input-control` and `ui/toggle-control`. Call sites drop them.
 */

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

export interface SelectControlProps
  extends Omit<
    React.ComponentProps<typeof SelectTrigger>,
    "onChange" | "value" | "defaultValue" | "children" | "asChild"
  > {
  label?: React.ReactNode
  help?: React.ReactNode
  hideLabelFromVision?: boolean
  options?: SelectControlOption[]
  value?: string
  required?: boolean
  /** WP's contract: the VALUE, not the event. An empty option reports `''`, as it does today. */
  onChange?: (value: string) => void
}

// Radix refuses an item whose value is the empty string, and treats an empty root value as "no
// selection". The empty option WP call sites rely on has to travel as something else in between.
const EMPTY_VALUE = "__ak_select_empty__"

const toRadix = (value: string) => (value === "" ? EMPTY_VALUE : value)
const fromRadix = (value: string) => (value === EMPTY_VALUE ? "" : value)

function SelectControl({
  label,
  help,
  hideLabelFromVision,
  options = [],
  value,
  onChange,
  disabled,
  required,
  name,
  className,
  id,
  ...props
}: SelectControlProps) {
  // A generated id is what lets the label be a real <label for=...> rather than a floating span.
  // The trigger is a <button>, which is labelable, so the label gives it its accessible name.
  // useId emits colons, which are invalid in a CSS selector, so they are stripped.
  const generated = React.useId().replace(/:/g, "")
  const triggerId = id ?? `select-control-${generated}`
  const helpId = help ? `${triggerId}-help` : undefined

  // When the stored value matches no option the trigger would otherwise sit empty. The empty
  // option's own label is the closest thing to what the native select used to show there.
  const placeholder = options.find((option) => option.value === "")?.label

  return (
    <div data-slot="select-control" className="w-full">
      {label && (
        <label
          data-slot="select-control-label"
          htmlFor={triggerId}
          className={
            hideLabelFromVision ? "sr-only" : "mb-1 block text-sm font-medium"
          }
        >
          {label}
        </label>
      )}

      <Select
        value={toRadix(value ?? "")}
        onValueChange={onChange ? (next) => onChange(fromRadix(next)) : undefined}
        disabled={disabled}
        required={required}
        name={name}
      >
        <SelectTrigger
          id={triggerId}
          aria-describedby={helpId}
          className={cn(className)}
          {...props}
        >
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {options.map((option, index) => (
            <SelectItem
              key={`${option.value}-${index}`}
              value={toRadix(option.value)}
              disabled={option.disabled}
            >
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

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

export { SelectControl }