import React from "react";
import { TextBox } from "@/components/ui/TextBox";

/**
 * Common props shared by all form fields with validation
 */
export interface BaseFormFieldProps<T extends string> {
  clearError: (field: T) => void;
  errors: Partial<Record<T, string>>;
  handleFieldBlur: (
    field: T,
    validateField: (field: T) => string | undefined
  ) => void;
  validateField: (field: T) => string | undefined;
}

/**
 * Props for the BaseFormField component
 */
export interface BaseFormFieldConfig<T extends string = string> {
  fieldName?: T; // The field name used for error keys and validation (optional if no validation)
  value: string | number;
  setValue: (value: string) => void;
  label: string;
  placeholder?: string;
  type?: "text" | "number" | "email" | "password" | "tel" | "url";
  wrapperClassName?: string; // Optional custom wrapper className
  textBoxClassName?: string; // Optional custom TextBox className
  enableHoverEffects?: boolean; // Whether to enable hover shadow effects (default: true)
  // Validation props (optional - only needed if field has validation)
  clearError?: (field: T) => void;
  errors?: Partial<Record<T, string>>;
  handleFieldBlur?: (
    field: T,
    validateField: (field: T) => string | undefined
  ) => void;
  validateField?: (field: T) => string | undefined;
}

/**
 * Base form field component that handles common patterns:
 * - Wrapper div with hover effects
 * - TextBox integration
 * - Error handling (optional)
 * - Validation on blur (optional)
 * - Error clearing on change (optional)
 */
export function BaseFormField<T extends string = string>({
  fieldName,
  value,
  setValue,
  label,
  placeholder,
  type = "text",
  clearError,
  errors,
  handleFieldBlur,
  validateField,
  wrapperClassName,
  textBoxClassName,
  enableHoverEffects = true,
}: BaseFormFieldConfig<T>) {
  const defaultWrapperClass = enableHoverEffects
    ? "group transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10"
    : "group";
  
  const defaultTextBoxClass = enableHoverEffects
    ? "text-sm transition-all duration-200 group-hover:border-[#428B4D]/50 group-hover:shadow-md group-hover:shadow-[#428B4D]/10"
    : "text-sm transition-all duration-200 group-hover:shadow-md";

  // Check if validation is enabled
  const hasValidation = fieldName && clearError && errors && handleFieldBlur && validateField;

  return (
    <div className={wrapperClassName || defaultWrapperClass}>
      <TextBox
        label={label}
        placeholder={placeholder || `Enter ${label.toLowerCase()}`}
        type={type}
        className={textBoxClassName || defaultTextBoxClass}
        value={value}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          setValue(e.target.value);
          if (hasValidation && fieldName) {
            clearError(fieldName);
          }
        }}
        onBlur={
          hasValidation && fieldName
            ? () => handleFieldBlur(fieldName, validateField)
            : undefined
        }
        error={hasValidation && fieldName ? errors[fieldName] : undefined}
      />
    </div>
  );
}