'use client';

import * as LabelPrimitive from "@radix-ui/react-label";

import { Slot } from "@radix-ui/react-slot";

import React from "react";

import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";

import {

Controller,

ControllerProps,

FieldPath,

FieldValues,

FormProvider,

useFormContext,

} from "react-hook-form";

import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";

import { cn } from "../../lib/utils";

import { SpanLabel } from "./label";

const Form = FormProvider;

type FormFieldContextValue<

TFieldValues extends FieldValues = FieldValues,

TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>

> = {

name: TName,

}

const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);

const FormField = <

TFieldValues extends FieldValues = FieldValues,

TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>

>({

...props

}: ControllerProps<TFieldValues, TName>) => {

return (

<FormFieldContext.Provider value={{ name: props.name }}>

<Controller {...props} />

</FormFieldContext.Provider>

);

};

const useFormField = () => {

const fieldContext = React.useContext(FormFieldContext);

const itemContext = React.useContext(FormItemContext);

const { getFieldState, formState } = useFormContext();

if (!fieldContext) {

throw new StackAssertionError("useFormField should be used within <FormField>");

}

const fieldState = getFieldState(fieldContext.name, formState);

const { id } = itemContext;

const formItemId = React.useId();

return {

id,

name: fieldContext.name,

formItemId: `${formItemId}-form-item`,

formDescriptionId: `${id}-form-item-description`,

formMessageId: `${id}-form-item-message`,

...fieldState,

};

};

type FormItemContextValue = {

id: string,

}

const FormItemContext = React.createContext<FormItemContextValue>(

{} as FormItemContextValue

);

const FormItem = forwardRefIfNeeded<

HTMLDivElement,

React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => {

const id = React.useId();

return (

<FormItemContext.Provider value={{ id }}>

<div ref={ref} className={cn("space-y-2", className)} {...props} />

</FormItemContext.Provider>

);

});

FormItem.displayName = "FormItem";

const FormLabel = forwardRefIfNeeded<

React.ElementRef<typeof LabelPrimitive.Root>,

React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>

>(({ className, ...props }, ref) => {

const { error } = useFormField();

return (

<SpanLabel

ref={ref}

className={cn(error && "text-destructive", className)}

{...props}

/>

);

});

FormLabel.displayName = "FormLabel";

const FormControl = forwardRefIfNeeded<

React.ElementRef<typeof Slot>,

React.ComponentPropsWithoutRef<typeof Slot>

>(({ ...props }, ref) => {

const { error, formItemId, formDescriptionId, formMessageId } = useFormField();

return (

<Slot

ref={ref}

id={formItemId}

aria-describedby={

!error

? `${formDescriptionId}`

: `${formDescriptionId} ${formMessageId}`

}

aria-invalid={!!error}

{...props}

/>

);

});

FormControl.displayName = "FormControl";

const FormDescription = forwardRefIfNeeded<

HTMLParagraphElement,

React.HTMLAttributes<HTMLParagraphElement>

>(({ className, ...props }, ref) => {

const { formDescriptionId } = useFormField();

return (

<p

ref={ref}

id={formDescriptionId}

className={cn("text-[0.8rem] text-muted-foreground", className)}

{...props}

/>

);

});

FormDescription.displayName = "FormDescription";

const FormMessage = forwardRefIfNeeded<

HTMLParagraphElement,

React.HTMLAttributes<HTMLParagraphElement>

>(({ className, children, ...props }, ref) => {

const { error, formMessageId } = useFormField();

const body = error ? String(error.message) : children;

if (!body) {

return null;

}

return (

<p

ref={ref}

id={formMessageId}

className={cn("text-[0.8rem] font-medium text-destructive", className)}

{...props}

>

{body}

</p>

);

});

FormMessage.displayName = "FormMessage";

export {

Form, FormControl,

FormDescription, FormField, FormItem,

FormLabel, FormMessage, useFormField

};