import React from "react";
import { FormFieldProps } from "react-compose-form";
import { FormFieldContext, FormItem, FormLabel, FormControl } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { FormMessage } from "@/components/form/form-message";

export type TextareaFieldProps = FormFieldProps<{
    className?: string;
    label?: string;
    placeholder?: string;
    minHeight?: number;
    maxLength?: number;
}>;

export const TextareaField: React.FC<TextareaFieldProps> = (props) => {
    const {
        label,
        name,
        minHeight,
        value = "",
        ...rest
    } = props;

    return (
        <FormFieldContext
          value={{ name: name as string }}>
            <FormItem>
                {label && (
                    <FormLabel>{label}</FormLabel>
                )}

                <FormControl>
                    <Textarea
                      {...rest}
                      style={{
                        ["--min-height" as string]: `${minHeight}px`
                      }}
                      className="min-h-[var(--min-height)]"
                      name={name}
                      value={value || ""} />
                </FormControl>

                {name && (
                    <FormMessage absolute name={name} />
                )}
            </FormItem>
        </FormFieldContext>
    );
};