zellyy-finance/src/components/expenses/ExpenseFormFields.tsx

import React, { useEffect, useState } from 'react';
import { UseFormReturn } from 'react-hook-form';
import { ExpenseFormValues } from './ExpenseForm';
import ExpenseCategorySelector from './ExpenseCategorySelector';
import ExpenseTitleSuggestions from './ExpenseTitleSuggestions';
import ExpenseTitleInput from './ExpenseTitleInput';
import ExpenseAmountInput from './ExpenseAmountInput';
import ExpensePaymentMethod from './ExpensePaymentMethod';

interface ExpenseFormFieldsProps {
  form: UseFormReturn<ExpenseFormValues>;
  isSubmitting?: boolean;
}

const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({ 
  form, 
  isSubmitting = false 
}) => {
  // 상태 관리 추가
  const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
  const [showPaymentMethod, setShowPaymentMethod] = useState(false);
  
  // 현재 선택된 카테고리 가져오기
  const selectedCategory = form.watch('category');
  
  // 카테고리가 변경될 때마다 제목 추천 표시
  useEffect(() => {
    if (selectedCategory) {
      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
      setTimeout(() => {
        setShowTitleSuggestions(true);
      }, 100);
    } else {
      setShowTitleSuggestions(false);
    }
  }, [selectedCategory]);
  
  // 제안된 제목 클릭 시 제목 필드에 설정
  const handleTitleSuggestionClick = (suggestion: string) => {
    form.setValue('title', suggestion);
  };
  
  return (
    <>
      {/* 카테고리 필드를 가장 먼저 배치 */}
      <ExpenseCategorySelector 
        value={form.watch('category')} 
        onValueChange={(value) => form.setValue('category', value)} 
        isDisabled={isSubmitting}
      />
      
      {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
      <ExpenseTitleSuggestions 
        category={selectedCategory}
        showSuggestions={showTitleSuggestions}
        onSuggestionClick={handleTitleSuggestionClick}
      />
      
      {/* 제목 필드를 두 번째로 배치 */}
      <ExpenseTitleInput 
        form={form} 
        isDisabled={isSubmitting} 
      />
      
      {/* 금액 필드를 세 번째로 배치 */}
      <ExpenseAmountInput 
        form={form} 
        onFocus={() => setShowPaymentMethod(true)} 
        isDisabled={isSubmitting} 
      />

      {/* 지출 방법 필드는 금액 입력 시에만 표시 */}
      <ExpensePaymentMethod 
        form={form} 
        showPaymentMethod={showPaymentMethod} 
        isDisabled={isSubmitting}
      />
    </>
  );
};

export default ExpenseFormFields;