"use client"

import * as React from "react"

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

/**
 * `InputControl` is replacement for `@wordpress/components`' `__experimentalInputControl` -
 * **213 sites across 57 files**.
 *
 * IT IS AN ADAPTER, NOT A RENAME, AND THE REASON IS `onChange`. WP's InputControl does NOT hand its
 * handler a change event - it hands it the VALUE:
 *
 * <InputControl onChange={(value) => setPriceInput(value ?? '')} />
 *
 * A native `<input>` (which is what `ui/input` is) passes the EVENT. Swapping one for the other without
 * an adapter would leave every one of those handlers receiving an object where it expects a string -
 * `value ?? ''` would silently become "[object Object]" in the field, and `field.onChange` in the
 * react-hook-form sites would store an event in the form state. No test in this repo renders enough of
 * those forms to catch it, and it would look fine until someone typed.
 *
 * The signature mirrors WP's `InputChangeCallback` exactly, including the second `{ event }` argument,
 * so a call site that reaches for the event still can.
 *
 * The other three props that are not native
 * `label` (208 of 213 sites), `help` (26) and `prefix` (2) are all rendered by WP and have no native
 * equivalent. They are reproduced here rather than pushed out to every call site, which is what keeps
 * the conversion a one-line import swap.
 *
 * Height: these inputs get TALLER, 40px -> 42px, and that is convergence rather than drift
 * `__next40pxDefaultSize` (on 207 of 213 sites) was WP's opt-in to a 40px control. The app's own rule
 * in index.css sets standard text inputs to `--ak-field-height` (**42px**) - but it explicitly excludes
 * `.components-input-control__input`, WP's inner input, via `:not(...)`. That exclusion exists BECAUSE
 * WP's markup had to be carved out of the app's field standard. Once the WordPress markup is gone the
 * carve-out no longer matches, and these fields join every other input in the app at 42px.
 * `__next40pxDefaultSize` is deliberately NOT accepted here: it is meaningless outside WordPress, and
 * accepting-and-ignoring it would leave a dead WP-era prop on 207 sites forever. Call sites drop it.
 */

export type InputControlChangeHandler = (
  value: string | undefined,
  extra: { event: React.ChangeEvent<HTMLInputElement> }
) => void

export interface InputControlProps
  extends Omit<React.ComponentProps<"input">, "onChange" | "prefix"> {
  label?: React.ReactNode
  help?: React.ReactNode
  prefix?: React.ReactNode
  /** WP's contract: the VALUE, not the event. The event is still available as the second argument. */
  onChange?: InputControlChangeHandler
}

function InputControl({
  label,
  help,
  prefix,
  className,
  onChange,
  id,
  ...props
}: InputControlProps) {
  // 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 when one is given, so an existing aria-describedby or test query
  // keeps working.
  // A date and time box holding only a day, a month or a year shows it at that precision, unchanged: the box itself
  // cannot show a date without a time, and there is no native year box, so a year is a number.
  const held = props.type === "datetime-local" && typeof props.value === "string" ? props.value : undefined
  const shownType = held === undefined ? props.type
    : /^\d{4}-\d{2}-\d{2}$/.test(held) ? "date"
    : /^\d{4}-\d{2}$/.test(held) ? "month"
    : /^\d{4}$/.test(held) ? "number"
    : props.type
  const generated = React.useId().replace(/:/g, "")
  const inputId = id ?? `input-control-${generated}`
  const helpId = help ? `${inputId}-help` : undefined

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

      {prefix ? (
        <div data-slot="input-control-container" className="flex w-full items-center gap-0">
          <span data-slot="input-control-prefix" className="shrink-0">{prefix}</span>
          <Input
            id={inputId}
            aria-describedby={helpId}
            className={cn(className)}
            onChange={onChange ? (event) => onChange(event.target.value, { event }) : undefined}
            {...props}
          type={shownType}
          />
        </div>
      ) : (
        <Input
          id={inputId}
          aria-describedby={helpId}
          className={cn(className)}
          onChange={onChange ? (event) => onChange(event.target.value, { event }) : undefined}
          {...props}
          type={shownType}
        />
      )}

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

export { InputControl }