
import React, { useState, useEffect } from 'react';
import { Badge } from '@/components/ui/badge';
import { UseFormReturn } from 'react-hook-form';
import { TransactionFormValues } from './TransactionFormFields';
import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';

interface TransactionTitleSuggestionsProps {
  form: UseFormReturn<TransactionFormValues>;
  showTitleSuggestions: boolean;
}

const TransactionTitleSuggestions: React.FC<TransactionTitleSuggestionsProps> = ({ 
  form, 
  showTitleSuggestions 
}) => {
  // 현재 선택된 카테고리 가져오기
  const selectedCategory = form.watch('category');
  
  // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
  const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
  
  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
  useEffect(() => {
    if (selectedCategory) {
      const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
      setTitleSuggestions(suggestions);
    }
  }, [selectedCategory]);

  // 제안된 제목 클릭 시 제목 필드에 설정
  const handleTitleSuggestionClick = (suggestion: string) => {
    form.setValue('title', suggestion);
  };
  
  if (!selectedCategory || titleSuggestions.length === 0) {
    return null;
  }
  
  return (
    <div 
      className={`mt-1 mb-3 overflow-hidden transition-all duration-300 ease-out ${
        showTitleSuggestions 
          ? 'max-h-24 opacity-100 translate-y-0' 
          : 'max-h-0 opacity-0 -translate-y-4'
      }`}
    >
      <div className="flex flex-wrap gap-2">
        {titleSuggestions.map((suggestion) => (
          <Badge 
            key={suggestion}
            variant="outline"
            className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
            onClick={() => handleTitleSuggestionClick(suggestion)}
          >
            {suggestion}
          </Badge>
        ))}
      </div>
    </div>
  );
};

export default TransactionTitleSuggestions;
