import React, { useState } from "react";
import "./FormField.css";


interface FormFieldProperties {
  type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
  placeholder?: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  required?: boolean;
  errorMessage?: string;
  showError?: boolean;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  className?: string;
  disabled?: boolean;
  autoComplete?: string;
  customValidator?: (value: string) => string | null;
  showErrorInitially?: boolean;
  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}


const FormField: React.FC<FormFieldProperties> = ({
  type = "text",
  placeholder,
  value,
  onChange,
  required = false,
  errorMessage = "Please fill out this field",
  showError = false,
  onBlur,
  onFocus,
  className = "",
  disabled = false,
  autoComplete = "off",
  customValidator,
  showErrorInitially = false,
  icon: Icon,
}) => {
  const [touched, setTouched] = useState<boolean>(showErrorInitially);
  const [customError, setCustomError] = useState<string>("");

  const validateField = (value: string): string => {
    if (required && !value) {
      return errorMessage;
    }
    if (customValidator) {
      const customValidation = customValidator(value);
      if (customValidation) {
        return customValidation;
      }
    }
    return "";
  };

  const shouldShowError = showError || (touched && validateField(value));

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
    setTouched(true);
    const error = validateField(value);
    setCustomError(error);
    onBlur?.(e);
  };

  const handleFocus = (e: React.FocusEvent<HTMLInputElement>): void => {
    setCustomError("");
    onFocus?.(e);
  };

  return (
    <div className={`form-field ${className}`}>
      {Icon && (
        <div className="field-icon">
          <Icon />
        </div>
      )}
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        onBlur={handleBlur}
        onFocus={handleFocus}
        required={required}
        disabled={disabled}
        autoComplete={autoComplete}
        className={shouldShowError ? "error" : ""}
      />
      {shouldShowError && (
        <div className="error-message">
          {customError || errorMessage}
        </div>
      )}
    </div>
  );
};

export default FormField;