import React from 'react';
import { useTranslation } from 'react-i18next';
import { useSearchFilter } from '@/hooks/useSearchFilter';
import SearchFilterButton from './SearchFilterButton';
import { SearchFilter, formatDateRange } from '@/types/filter';

interface SearchFilterExampleProps {
  onFilterChange?: (filter: SearchFilter) => void;
  className?: string;
}

const SearchFilterExample: React.FC<SearchFilterExampleProps> = ({
  onFilterChange,
  className = ''
}) => {
  const { t } = useTranslation();
  const searchFilterOptions = onFilterChange ? {
    storageKey: 'transaction_search_filter',
    onFilterChange
  } : {
    storageKey: 'transaction_search_filter'
  };

  const {
    filter,
    isModalOpen,
    openModal,
    closeModal,
    handleFilterConfirm,
    getDisplayText,
    isFilterActive,
    resetFilter
  } = useSearchFilter(searchFilterOptions);

  return (
    <div className={`space-y-4 ${className}`}>
      {/* 조회조건 버튼과 필터 정보 */}
      <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
        <div className="flex gap-2 items-center">
          <SearchFilterButton
            displayText={getDisplayText()}
            isActive={isFilterActive}
            onClick={openModal}
          />
          
          {/* 초기화 버튼 (필터가 활성화된 경우만 표시) */}
          {isFilterActive && (
            <button
              onClick={resetFilter}
              className="text-sm text-gray-500 hover:text-gray-700 underline"
            >
              {t('common.reset')}
            </button>
          )}
        </div>
        
        {/* 현재 필터 요약 정보 */}
        <div className="text-sm text-gray-600">
          {filter.dateRange && (
            <span>
              {formatDateRange(filter.dateRange)}
            </span>
          )}
        </div>
      </div>

      {/* 현재 적용된 필터 상세 정보 (디버깅용) */}
      <div className="bg-gray-50 p-4 rounded-lg">
        <h3 className="text-sm font-medium text-gray-900 mb-2">{t('filter.currentConditions')}</h3>
        <div className="space-y-1 text-sm text-gray-600">
          <div>
            <span className="font-medium">{t('filter.period')}:</span> {filter.period === 'custom' ? t('filter.periods.custom') : t(`filter.periods.${filter.period}`)}
          </div>
          {filter.dateRange && (
            <div>
              <span className="font-medium">{t('filter.dateRange')}:</span> {formatDateRange(filter.dateRange)}
            </div>
          )}
          <div>
            <span className="font-medium">{t('filter.transactionType')}:</span> {t(`filter.transactionTypes.${filter.transactionType}`)}
          </div>
          <div>
            <span className="font-medium">{t('filter.sortOrder')}:</span> {t(`filter.sortOrders.${filter.sortOrder}`)}
          </div>
        </div>
      </div>

      {/* 조회조건 설정 모달 
      <SearchFilterModal
        isOpen={isModalOpen}
        onClose={closeModal}
        onConfirm={handleFilterConfirm}
        initialFilter={filter}
      />
      */}
    </div>
  );
};

export default SearchFilterExample;