import React from 'react';
import { useForm } from 'react-hook-form';
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Loader2 } from 'lucide-react';
import ExpenseCategorySelector from './ExpenseCategorySelector';

export interface ExpenseFormValues {
  title: string;
  amount: string;
  category: string;
}

interface ExpenseFormProps {
  onSubmit: (data: ExpenseFormValues) => void;
  onCancel: () => void;
  isSubmitting?: boolean;
}

const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitting = false }) => {
  const form = useForm<ExpenseFormValues>({
    defaultValues: {
      title: '',
      amount: '',
      category: '식비',
    }
  });
  
  // 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 (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="title"
          render={({ field }) => (
            <FormItem>
              <FormLabel>제목</FormLabel>
              <Input 
                placeholder="지출 내역을 입력하세요" 
                {...field} 
                disabled={isSubmitting}
              />
            </FormItem>
          )}
        />
        
        <FormField
          control={form.control}
          name="amount"
          render={({ field }) => (
            <FormItem>
              <FormLabel>금액</FormLabel>
              <Input 
                placeholder="금액을 입력하세요" 
                value={field.value}
                onChange={handleAmountChange}
                disabled={isSubmitting}
              />
            </FormItem>
          )}
        />
        
        <FormField
          control={form.control}
          name="category"
          render={({ field }) => (
            <FormItem>
              <FormLabel>카테고리</FormLabel>
              <ExpenseCategorySelector 
                value={field.value} 
                onValueChange={(value) => field.onChange(value)}
              />
            </FormItem>
          )}
        />
        
        <div className="flex justify-end gap-2 pt-2">
          <Button 
            type="button" 
            variant="outline" 
            onClick={onCancel}
            disabled={isSubmitting}
          >
            취소
          </Button>
          <Button 
            type="submit"
            className="bg-neuro-income text-white hover:bg-neuro-income/90"
            disabled={isSubmitting}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                저장 중...
              </>
            ) : '저장'}
          </Button>
        </div>
      </form>
    </Form>
  );
};

export default ExpenseForm;