// DatePickerField.tsx

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  Textarea,
} from "@repo/shadcn-ui/components";

import { cn } from '@repo/shadcn-ui/lib/utils';
import { Control, Controller, FieldPath, FieldValues, useFormState } from "react-hook-form";
import { CommonInputProps } from "./types.js";

type TextAreaFieldProps<TFormValues extends FieldValues> = CommonInputProps & {
  control: Control<TFormValues>;
  name: FieldPath<TFormValues>;

  label?: string;
  description?: string;

  orientation?: "vertical" | "horizontal" | "responsive",

  inputClassName?: string;
};

export function TextAreaField<TFormValues extends FieldValues>({
  control,
  name,
  label,
  description,
  required = false,
  readOnly = false,

  orientation = 'vertical',

  className,
  inputClassName,

  ...inputRest
}: TextAreaFieldProps<TFormValues>) {
  const { isSubmitting, isValidating } = useFormState({ control, name });
  const disabled = isSubmitting || inputRest.disabled;

  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState }) => {
        return (
          <Field data-invalid={fieldState.invalid} orientation={orientation} className={cn("gap-1", className)}>
            {label && <FieldLabel className='text-xs text-muted-foreground text-nowrap' htmlFor={name}>{label}</FieldLabel>}

            <Textarea
              ref={field.ref}
              id={name}
              value={field.value ?? ""}
              onChange={field.onChange}
              onBlur={field.onBlur}
              aria-invalid={fieldState.invalid}
              aria-busy={isValidating}
              {...inputRest}
              disabled={disabled}
              aria-disabled={disabled}
              className={cn(inputClassName)}
            />


            {false && <FieldDescription className='text-xs'>{description || "\u00A0"}</FieldDescription>}
            <FieldError errors={[fieldState.error]} />
          </Field>
        );
      }}
    />
  );
}