import React, { PropsWithChildren } from "react";
import { useFormContext, useFormState } from "react-hook-form";
import { useFormGroupName } from "react-compose-form";
import { cn } from "@/lib/utils/cn";

type FormMessageProps = PropsWithChildren<{
    className?: string;
    name: string;
    absolute?: boolean;
}>;

export const FormMessage: React.FC<FormMessageProps> = (props) => {
    const {
        className,
        name,
        absolute,
        children
    } = props;

    const fullName = useFormGroupName(name),
          formState = useFormState({ name: absolute ? name : fullName }),
          { getFieldState } = useFormContext(),
          { error } = getFieldState(absolute ? name : fullName, formState);

    const errorMessage = error?.message
        ? String(error.message)
        : error?.root?.message
            ? String(error.root.message)
            : null;

    if(errorMessage) {
        return (
            <p
              className={cn("text-destructive font-medium text-xs", className)}
              data-slot="form-message">
                {errorMessage}
            </p>
        );
    }

    if(!children) {
        return null;
    }

    return (
        <p
          // id={formDescriptionId}}
          className={cn("text-muted-foreground text-xs", className)}
          data-slot="form-description">
            {children}
        </p>
    );
};