Generic Textarea

"use client"

import * as React from "react"
import { FieldValues, Path, useFormContext } from "react-hook-form"

import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
import { cn } from "@/lib/utils"

type GenericTextareaProps<TFieldValues extends FieldValues> = Omit<
  React.ComponentProps<"textarea">,
  "name" | "onChange" | "onBlur"
> & {
  name: Path<TFieldValues>
  label?: React.ReactNode
  description?: React.ReactNode
  required?: boolean
  /**
   * Label appended to the field label when the field is not required.
   * Pass `null` (or an empty string) to suppress the label entirely (useful for dense forms where
   * every field is optional and the annotation would be redundant).
   * Defaults to `null` - you must opt in by passing e.g. `optionalLabel="Optional"`.
   */
  optionalLabel?: React.ReactNode | null
  /**
   * Visually disables the textarea without clearing its value on submit.
   *
   * Unlike passing `disabled` directly to react-hook-form's `register()`,
   * this prop only sets the native `disabled` attribute on the `<textarea>`
   * element. The field value is preserved in form state and included in
   * submitted data.
   *
   * @default false
   */
  disabled?: boolean
  /** Forwarded to react-hook-form's `register()` onChange handler. */
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>
  /** Forwarded to react-hook-form's `register()` onBlur handler. */
  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>
}

/**
 * Derives a human-readable label from a react-hook-form field path.
 *
 * - Splits on `.` and discards pure-numeric segments (array indices).
 * - Falls back to the last segment if every segment is numeric.
 * - Returns the generic string "Field" only as a last resort; callers should
 *   always supply an explicit `label` prop for paths that might resolve poorly.
 */
function getLabelFromName(name: string): string {
  const segments = name.split(".")
  // Prefer the last non-numeric segment so "items.0.firstName" -> "First Name"
  const lastMeaningful = segments.findLast((s) => !/^\d+$/.test(s)) ?? segments.at(-1) ?? name

  const formatted = lastMeaningful
    .replace(/\[.*?\]/g, "")
    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
    .replace(/([a-zA-Z])(\d+)/g, "$1 $2")
    .replace(/[_-]/g, " ")
    .trim()
    .replace(/\b\w/g, (letter) => letter.toUpperCase())

  return formatted || "Field"
}

function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
  return (node) => {
    for (const ref of refs) {
      if (typeof ref === "function") {
        ref(node)
      } else if (ref != null) {
        ;(ref as React.RefObject<T | null>).current = node
      }
    }
  }
}

/**
 * A reusable form textarea that integrates with react-hook-form via `useFormContext`.
 *
 * Must be rendered inside a `FormProvider`. Supports label auto-generation,
 * description, error display, and optional-field annotations while forwarding
 * all other native `<textarea>` props.
 */
export function GenericTextarea<TFieldValues extends FieldValues>({
  name,
  ref,
  id,
  label,
  className,
  required,
  optionalLabel = null,
  disabled = false,
  description,
  onBlur,
  onChange,
  ...props
}: GenericTextareaProps<TFieldValues>) {
  const form = useFormContext<TFieldValues>()
  if (!form) {
    throw new Error(
      "<GenericTextarea> must be rendered inside a react-hook-form <FormProvider>. " +
        `No FormProvider was found in the component tree for field "${name}".`
    )
  }

  const { register, formState } = form
  const fieldName = name as string
  const textareaId = id ?? fieldName
  const fieldState = form.getFieldState(name, formState)
  const fieldError = fieldState.error
  const errorId = fieldError ? `${textareaId}-error` : undefined
  const descriptionId = description ? `${textareaId}-description` : undefined
  const shouldRenderOptionalLabel =
    !required &&
    optionalLabel != null &&
    (typeof optionalLabel !== "string" || optionalLabel.trim().length > 0)
  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ")

  const { ref: registerRef, ...restRegistration } = register(name, {
    onBlur,
    onChange,
    required,
  })

  return (
    <Field data-disabled={disabled ? true : undefined} data-invalid={fieldError ? true : undefined}>
      <FieldLabel htmlFor={textareaId} className="flex items-center gap-1">
        {label ?? getLabelFromName(fieldName)}
        {required ? (
          <span className="text-destructive" aria-label="required">
            *
          </span>
        ) : shouldRenderOptionalLabel ? (
          <span className="text-muted-foreground" aria-label="optional">
            {optionalLabel}
          </span>
        ) : null}
      </FieldLabel>

      <Textarea
        id={textareaId}
        ref={mergeRefs(ref, registerRef)}
        className={cn(className)}
        disabled={disabled}
        aria-required={required || undefined}
        aria-invalid={fieldError ? true : undefined}
        aria-describedby={describedBy || undefined}
        {...props}
        {...restRegistration}
      />

      {description ? <FieldDescription id={descriptionId}>{description}</FieldDescription> : null}

      {fieldError ? <FieldError id={errorId} errors={[fieldError]} /> : null}
    </Field>
  )
}

export const GenericTextArea = GenericTextarea