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

interface BaseTextWithSelectFieldProps<T extends string = string> {
  // Text field props
  textLabel: string;
  textValue: any;
  setTextValue: (value: any) => void;
  textPlaceholder?: string;
  textType?: string;
  textClassName?: string;
  
  // Select field props
  selectApiUrl: string;
  selectValue: any;
  setSelectValue: (value: any) => void;
  selectPlaceholder?: string;
  
  // Validation props
  clearError?: (field: T) => void;
  errors?: { [key in T]?: string };
  handleFieldBlur?: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField?: (field: T) => string | undefined;
  textFieldName?: T;
  
  // Layout props
  containerClassName?: string;
  enableHoverEffects?: boolean;
}

export function BaseTextWithSelectField<T extends string = string>({
  textLabel,
  textValue,
  setTextValue,
  textPlaceholder = "Enter value...",
  textType = "text",
  textClassName = "text-sm transition-all duration-200 group-hover:shadow-md",
  selectApiUrl,
  selectValue,
  setSelectValue,
  selectPlaceholder = "Select option...",
  clearError,
  errors,
  handleFieldBlur,
  validateField,
  textFieldName,
  containerClassName = "group sm:col-span-2",
  enableHoverEffects = false
}: BaseTextWithSelectFieldProps<T>) {
  
  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTextValue(e.target.value);
    if (clearError && textFieldName) {
      clearError(textFieldName);
    }
  };

  const handleTextBlur = () => {
    if (handleFieldBlur && validateField && textFieldName) {
      handleFieldBlur(textFieldName, validateField);
    }
  };

  const textError = textFieldName ? errors?.[textFieldName] : undefined;

  return (
    <div className={containerClassName}>
      <div className="flex gap-4 items-end">
        <div className="flex-1">
          <TextBox
            label={textLabel}
            placeholder={textPlaceholder}
            type={textType}
            className={textClassName}
            value={textValue}
            onChange={handleTextChange}
            onBlur={handleTextBlur}
            error={textError}
          />
        </div>

        <div className="flex-1">
          <BaseSelectField
            label=" "
            apiUrl={selectApiUrl}
            value={selectValue}
            onChange={setSelectValue}
            placeholder={selectPlaceholder}
            enableHoverEffects={enableHoverEffects}
          />
        </div>
      </div>
    </div>
  );
}