import { ClassValue, StyledComponentProps } from "../../types/shared.js";
import "../label/types.js";
import { FormSlots } from "./form-variants.js";
import { ComponentProps, ElementType, ReactNode } from "react";
import { ComputedFieldProps, FieldProps } from "@skyroc/form";

//#region src/components/form/types.d.ts

/**
 * Class names for different slots in the form component.
 * Allows customizing styles for specific parts of form layout.
 */
type FormClassNames = Partial<Record<FormSlots, ClassValue>>;
/**
 * Props for the form description component.
 * Used to display helper text or additional information about a form field.
 */

/**
 * Shared props for form field components.
 * Common configuration options for both regular and computed fields.
 */
type FormSharedProps = StyledComponentProps<{
  /**
   * Class names for customizing different parts of the form field.
   */
  classNames?: FormClassNames;
  /**
   * Helper text displayed below the form field input.
   * Used to provide additional context or usage information.
   */
  description?: string;
  /**
   * Error message displayed when field validation fails.
   */
  error?: string;
  /**
   * Label text displayed above the form field input.
   */
  label?: ReactNode;
}>;
/**
 * Props for a regular form field component.
 * Used for standard form inputs with validation and labeling.
 *
 * @template Values - The shape of form values object
 *
 * @example
 * ```tsx
 * <FormField<{ email: string }>
 *   name="email"
 *   label="Email Address"
 *   description="Enter your email"
 *   error={errors.email}
 *   component={Input}
 * />
 * ```
 */
type FormFieldProps<Values = any> = FieldProps<Values> & FormSharedProps & {
  /**
   * The React component or HTML element to render as the form input.
   * Examples: Input, Select, Textarea, etc.
   */
  component?: ElementType;
};
/**
 * Props for a computed form field component.
 * Used for fields that derive their value from other form fields.
 *
 * @template Values - The shape of form values object
 *
 * @example
 * ```tsx
 * <FormComputedField<{ firstName: string; lastName: string; fullName: string }>
 *   name="fullName"
 *   compute={(values) => `${values.firstName} ${values.lastName}`}
 *   label="Full Name"
 * />
 * ```
 */
type FormComputedFieldProps<Values = any> = ComputedFieldProps<Values> & FormSharedProps;
//#endregion
export { FormComputedFieldProps, FormFieldProps };