
import React, { useState, useEffect } from 'react';
import { UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
import TransactionCategorySelector from './TransactionCategorySelector';
import TransactionTitleSuggestions from './TransactionTitleSuggestions';
import TransactionTitleInput from './TransactionTitleInput';
import TransactionAmountInput from './TransactionAmountInput';
import TransactionPaymentMethod from './TransactionPaymentMethod';

// Form schema for validation
export const transactionFormSchema = z.object({
  title: z.string().min(1, '제목을 입력해주세요'),
  amount: z.string().min(1, '금액을 입력해주세요'),
  category: z.enum(['음식', '쇼핑', '교통', '기타']),
  paymentMethod: z.enum(['신용카드', '현금']).default('신용카드'),
});

export type TransactionFormValues = z.infer<typeof transactionFormSchema>;

// Function to format number with commas
export const formatWithCommas = (value: string) => {
  const numericValue = value.replace(/[^0-9]/g, '');
  return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

interface TransactionFormFieldsProps {
  form: UseFormReturn<TransactionFormValues>;
}

const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
  // 상태 관리를 추가합니다
  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]);

  return (
    <>
      {/* 카테고리 필드를 첫 번째로 배치 */}
      <TransactionCategorySelector form={form} />
      
      {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
      <TransactionTitleSuggestions 
        form={form} 
        showTitleSuggestions={showTitleSuggestions} 
      />
      
      {/* 제목 필드를 두 번째로 배치 */}
      <TransactionTitleInput form={form} />
      
      {/* 금액 필드를 세 번째로 배치 */}
      <TransactionAmountInput 
        form={form} 
        onFocus={() => setShowPaymentMethod(true)} 
      />

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

export default TransactionFormFields;
