"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import { Input } from "./input"

/**
 * `TextControl` is replacement for `@wordpress/components`' `TextControl` -
 * **30 live usages across 11 files**.
 *
 * AN ADAPTER, NOT A RENAME, AND THE REASON IS `onChange`. WP does NOT hand its handler a change
 * event - it hands it the VALUE:
 *
 * <TextControl value={form.signerName} onChange={set('signerName')} />
 *
 * A native `<input>` (which is what `ui/input` is) passes the EVENT. Swapping one for the other
 * without an adapter would store an event object where a string is expected, and in the
 * react-hook-form sites store one in the form state. Nothing here renders enough of those forms to
 * catch it, and it would look fine until someone typed.
 *
 * The signature is WP's, not `ui/input-control`'s: WP's `TextControl` passes ONLY the value, with no
 * second `{ event }` argument, and no call site reaches for one.
 *
 * `label` and `help` are rendered by WP and have no equivalent on a bare input. Reproducing them
 * here is what keeps each conversion a one-line import swap.
 *
 * `type` defaults to "text" - WP's default. Six sites set it to date, time, email or number.
 *
 * NO REF FORWARDING, and it is a known gap rather than an oversight. Eight sites spread a
 * react-hook-form `field`, whose `ref` is how the form focuses this field when validation fails.
 * `ui/input` is a plain function component, and React 18 will not pass a ref through one, so the ref
 * has nowhere to land. `ui/textarea` was given `forwardRef` for exactly this reason; `ui/input`
 * needs the same one-line change before those eight sites are converted.
 *
 * `__nextHasNoMarginBottom` and `__next40pxDefaultSize` are deliberately NOT accepted, the same
 * ruling made for `ui/input-control`: they are meaningless outside WordPress, and
 * accepting-and-ignoring them would leave dead WP-era props on 30 sites for ever. Call sites drop
 * them, and these inputs join every other field in the app at `--ak-field-height`.
 */

export interface TextControlProps
  extends Omit<React.ComponentProps<"input">, "onChange"> {
  label?: React.ReactNode
  help?: React.ReactNode
  /** WP's contract: the VALUE, not the event. */
  onChange?: (value: string) => void
}

function TextControl({
  label,
  help,
  className,
  onChange,
  id,
  type = "text",
  ...props
}: TextControlProps) {
  // A generated id is what lets the label be a real <label for=...> rather than a floating span.
  // Falls back to the caller's id, so an existing test query or aria-describedby keeps working.
  // useId emits colons, which are invalid in a CSS selector, so they are stripped.
  const generated = React.useId().replace(/:/g, "")
  const inputId = id ?? `text-control-${generated}`
  const helpId = help ? `${inputId}-help` : undefined

  return (
    <div data-slot="text-control" className="w-full">
      {label && (
        <label
          data-slot="text-control-label"
          htmlFor={inputId}
          className="mb-1 block text-sm font-medium"
        >
          {label}
        </label>
      )}

      <Input
        id={inputId}
        type={type}
        aria-describedby={helpId}
        className={cn(className)}
        onChange={onChange ? (event) => onChange(event.target.value) : undefined}
        {...props}
      />

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

export { TextControl }