Uecko_ERP/packages/rdx-ui/src/components/form/TextAreaField.tsx

// DatePickerField.tsx

import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Textarea,
} from "@repo/shadcn-ui/components";

import { cn } from "@repo/shadcn-ui/lib/utils";
import { Control, FieldPath, FieldValues, useController } from "react-hook-form";
import { useTranslation } from "../../locales/i18n.ts";
import { CommonInputProps } from "./types.js";

type TextAreaFieldProps<TFormValues extends FieldValues> = CommonInputProps & {
  control: Control<TFormValues>;
  name: FieldPath<TFormValues>;
  label?: string;
  placeholder?: string;
  description?: string;
  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;
  className?: string;

  /** Contador de caracteres (si usas maxLength) */
  showCounter?: boolean;
};

export function TextAreaField<TFormValues extends FieldValues>({
  control,
  name,
  label,
  placeholder,
  description,
  disabled = false,
  required = false,
  readOnly = false,
  className,
  showCounter = false,
  maxLength,
}: TextAreaFieldProps<TFormValues>) {
  const { t } = useTranslation();
  const isDisabled = disabled || readOnly;
  const { field, fieldState } = useController({ control, name });

  const describedById = description ? `${name}-desc` : undefined;
  const errorId = fieldState.error ? `${name}-err` : undefined;

  const valueLength = (field.value?.length ?? 0) as number;

  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem className={cn("space-y-0", className)}>
          {label && (
            <div className='mb-1 flex justify-between gap-2'>
              <div className='flex items-center gap-2'>
                <FormLabel
                  htmlFor={name}
                  className={cn("m-0", disabled ? "text-muted-foreground" : "")}
                >
                  {label}
                </FormLabel>
                {required && (
                  <span className='text-xs text-destructive'>{t("common.required")}</span>
                )}
              </div>
              {/* Punto “unsaved” */}
              {fieldState.isDirty && (
                <span className='text-[10px] text-muted-foreground'>{t("common.modified")}</span>
              )}
            </div>
          )}
          <FormControl>
            <Textarea
              disabled={isDisabled}
              placeholder={placeholder}
              className={"placeholder:font-normal placeholder:italic bg-background"}
              maxLength={maxLength}
              {...field}
            />
          </FormControl>

          <div className='mt-1 flex items-start justify-between'>
            <FormDescription
              id={describedById}
              className={cn("text-xs truncate", !description && "invisible")}
            >
              {description || "\u00A0"}
            </FormDescription>

            {showCounter && typeof maxLength === "number" && (
              <p className='text-xs text-muted-foreground'>
                {valueLength} / {maxLength}
              </p>
            )}
          </div>

          <FormMessage id={errorId} />
        </FormItem>
      )}
    />
  );
}