
import React from 'react';
import { FormField, FormItem, FormLabel } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { UseFormReturn } from 'react-hook-form';
import { ExpenseFormValues } from './ExpenseForm';

interface ExpenseAmountInputProps {
  form: UseFormReturn<ExpenseFormValues>;
  onFocus?: () => void;
  isDisabled?: boolean;
}

const ExpenseAmountInput: React.FC<ExpenseAmountInputProps> = ({ 
  form, 
  onFocus, 
  isDisabled = false 
}) => {
  // Format number with commas
  const formatWithCommas = (value: string): string => {
    // Remove commas first to avoid duplicates when typing
    const numericValue = value.replace(/[^0-9]/g, '');
    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };

  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formattedValue = formatWithCommas(e.target.value);
    form.setValue('amount', formattedValue);
  };
  
  return (
    <FormField
      control={form.control}
      name="amount"
      render={({ field }) => (
        <FormItem>
          <FormLabel>금액</FormLabel>
          <Input 
            placeholder="금액을 입력하세요" 
            value={field.value}
            onChange={handleAmountChange}
            onFocus={onFocus}
            disabled={isDisabled}
          />
        </FormItem>
      )}
    />
  );
};

export default ExpenseAmountInput;
