import React, { useRef, useEffect } from 'react';
import { BaseTextFieldProps } from './TextFieldTypes';
import styles from './TextField.module.css';

interface TextFieldProps extends BaseTextFieldProps {
  // Allow all standard HTML input attributes
  autoComplete?: string;
  pattern?: string;
  step?: string;
  min?: string | number;
  max?: string | number;
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
}

const TextField: React.FC<TextFieldProps> = ({
  value = '',
  onChange,
  placeholder,
  disabled = false,
  required = false,
  readonly = false,
  size = 'md',
  error,
  helperText,
  label,
  className = '',
  type = 'text',
  maxLength,
  minLength,
  autoFocus = false,
  name,
  id,
  ...props
}) => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // Use textarea for text types, input for others
  const useTextarea = type === 'text' || type === 'search';

  // Simple auto-grow
  useEffect(() => {
    if (!useTextarea || !textareaRef.current) return;
    const textarea = textareaRef.current;
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
  });

  // Handle input change
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    if (!disabled && !readonly && onChange) {
      onChange(e.target.value);
    }
  };

  // Build classes for input container
  const containerClasses = [
    styles.inputContainer,
    styles[size],
    className
  ].filter(Boolean).join(' ');

  // Build classes for input/textarea
  const inputClasses = [
    useTextarea ? styles.textarea : styles.input,
    error ? styles.inputFieldError : '',
  ].filter(Boolean).join(' ');

  return (
    <div className={styles.textFieldWrapper}>
      {/* Label */}
      {label && (
        <label 
          htmlFor={id || name}
          className={styles.labelRequired}
        >
          {label}
          {required && <span className={styles.required}>*</span>}
        </label>
      )}

      {/* Input or Textarea */}
      <div className={containerClasses}>
        {useTextarea ? (
          <textarea
            ref={textareaRef}
            value={value}
            onChange={handleChange}
            placeholder={placeholder}
            disabled={disabled}
            readOnly={readonly}
            required={required}
            className={inputClasses}
            maxLength={maxLength}
            minLength={minLength}
            autoFocus={autoFocus}
            name={name}
            id={id}
            rows={1}
            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
          />
        ) : (
          <input
            type={type}
            value={value}
            onChange={handleChange}
            placeholder={placeholder}
            disabled={disabled}
            readOnly={readonly}
            required={required}
            className={inputClasses}
            maxLength={maxLength}
            minLength={minLength}
            autoFocus={autoFocus}
            name={name}
            id={id}
            {...props}
          />
        )}
      </div>

      {/* Error or Helper text */}
      {error ? (
        <span className={styles.errorText}>{error}</span>
      ) : helperText ? (
        <span className={styles.helperText}>{helperText}</span>
      ) : null}
    </div>
  );
};

export default TextField;

