"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import { Textarea } from "./textarea"

/**
 * `TextareaControl` is replacement for `@wordpress/components`' `TextareaControl` -
 * **48 live usages across 29 files**, the largest WordPress control left in the app.
 *
 * AN ADAPTER, NOT A RENAME, AND THE REASON IS `onChange`. WP does NOT hand its handler a change
 * event - it hands it the VALUE:
 *
 * <TextareaControl value={instructions} onChange={setInstructions} />
 *
 * A native `<textarea>` (which is what `ui/textarea` is) passes the EVENT. Swapping one for the
 * other without an adapter would put an event object into state, and in the react-hook-form sites
 * put one into the form state. It looks fine until someone types.
 *
 * `label` and `help` are rendered by WP and have no equivalent on a bare textarea. Reproducing
 * them here is what keeps each conversion a one-line import swap.
 *
 * `rows` defaults to 4 - WP's default - so the one call site that omits it is unchanged.
 *
 * The ref is forwarded because 11 sites spread a react-hook-form `field`, and `field.ref` is how
 * the form focuses this field when validation fails. `ui/textarea` already forwards.
 *
 * `__nextHasNoMarginBottom` is deliberately NOT accepted, the same ruling made for
 * `ui/input-control` and `ui/toggle-control`: it is meaningless outside WordPress, and
 * accepting-and-ignoring it would leave a dead WP-era prop on 48 sites for ever. Call sites drop it.
 */

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

const TextareaControl = React.forwardRef<HTMLTextAreaElement, TextareaControlProps>(
  ({ label, help, className, onChange, id, rows = 4, ...props }, ref) => {
    // 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 textareaId = id ?? `textarea-control-${generated}`
    const helpId = help ? `${textareaId}-help` : undefined

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

        <Textarea
          ref={ref}
          id={textareaId}
          rows={rows}
          aria-describedby={helpId}
          className={cn(className)}
          onChange={onChange ? (event) => onChange(event.target.value) : undefined}
          {...props}
        />

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

export { TextareaControl }