import React from 'react';
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';

// Form schema for validation - 카테고리를 3개로 제한
export const transactionFormSchema = z.object({
  title: z.string().min(1, '제목을 입력해주세요'),
  amount: z.string().min(1, '금액을 입력해주세요'),
  category: z.enum(['식비', '생활비', '교통비']),
});

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 handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formattedValue = formatWithCommas(e.target.value);
    form.setValue('amount', formattedValue);
  };

  return (
    <>
      <FormField
        control={form.control}
        name="title"
        render={({ field }) => (
          <FormItem>
            <FormLabel>제목</FormLabel>
            <FormControl>
              <Input placeholder="제목을 입력하세요" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      
      <FormField
        control={form.control}
        name="amount"
        render={({ field }) => (
          <FormItem>
            <FormLabel>금액</FormLabel>
            <FormControl>
              <Input 
                placeholder="금액을 입력하세요" 
                {...field} 
                onChange={handleAmountChange}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      
      <FormField
        control={form.control}
        name="category"
        render={({ field }) => (
          <FormItem>
            <FormLabel>카테고리</FormLabel>
            <div className="grid grid-cols-3 gap-2">
              {EXPENSE_CATEGORIES.map((category) => (
                <div
                  key={category}
                  className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
                    field.value === category 
                      ? 'border-neuro-income bg-neuro-income/10' 
                      : 'border-gray-200'
                  }`}
                  onClick={() => form.setValue('category', category as any)}
                >
                  <div className="p-1 rounded-full">
                    {categoryIcons[category]}
                  </div>
                  <span>{category}</span>
                </div>
              ))}
            </div>
            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
};

export default TransactionFormFields;