import { cn } from "@/lib/utils";
import {
  AutosizeTextarea,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  Textarea,
} from "@/ui";
import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";
import {
  FieldErrors,
  FieldPath,
  FieldValues,
  UseControllerProps,
  useFormContext,
} from "react-hook-form";
import { FormErrorMessage } from "./FormErrorMessage";
import { FormLabel, FormLabelProps } from "./FormLabel";

const formTextAreaFieldVariants = cva("", {
  variants: {
    variant: {
      default: "",
      outline:
        "border-0 focus-visible:border focus-visible:border-input focus-visible:ring-0 focus-visible:ring-offset-0 ",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export type FormTextAreaFieldProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  autoSize?: boolean;
  placeholder?: string;
  description?: string;
  className?: string;
} & Partial<FormLabelProps> &
  UseControllerProps<TFieldValues, TName> & {
    errors?: FieldErrors<TFieldValues>;
  } & VariantProps<typeof formTextAreaFieldVariants>;

export const FormTextAreaField = React.forwardRef<
  HTMLDivElement,
  React.TextareaHTMLAttributes<HTMLTextAreaElement> & FormTextAreaFieldProps
>(
  (
    {
      name,
      label,
      hint,
      placeholder,
      description,

      required,
      className,

      autoSize,
      variant,

      ...props
    },
    ref
  ) => {
    const { control } = useFormContext();
    return (
      <FormField
        control={control}
        name={name}
        rules={{ required }}
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        render={({ field, fieldState }) => (
          <FormItem ref={ref} className={cn(className, "flex flex-col space-y-3")}>
            {label && <FormLabel label={label} hint={hint} required={required} />}
            <FormControl className='grow'>
              {autoSize ? (
                <AutosizeTextarea
                  placeholder={placeholder}
                  className={cn(
                    fieldState.error ? "border-destructive focus-visible:ring-destructive" : "",
                    "resize-y",
                    formTextAreaFieldVariants({ variant, className })
                  )}
                  {...props}
                  {...field}
                />
              ) : (
                <Textarea
                  placeholder={placeholder}
                  className={cn(
                    fieldState.error ? "border-destructive focus-visible:ring-destructive" : "",
                    "resize-y",
                    formTextAreaFieldVariants({ variant, className })
                  )}
                  {...props}
                  {...field}
                />
              )}
            </FormControl>

            {description && <FormDescription>{description}</FormDescription>}
            <FormErrorMessage />
          </FormItem>
        )}
      />
    );
  }
);
