import { ItemType } from '@rpg-engine/shared';
import React from 'react';
import {
  AdvancedFilters,
  IFilterOption,
  IFilterSection,
} from '../../../shared/AdvancedFilters/AdvancedFilters';
import { formatItemType } from './InformationCenterItemsSection';

interface IItemsAdvancedFiltersProps {
  isOpen: boolean;
  onToggle: () => void;
  onTierChange: (value: string) => void;
  onTypeChange: (value: string) => void;
  selectedTier: string;
  selectedType: string;
}

export const ItemsAdvancedFilters = ({
  isOpen,
  onToggle,
  onTierChange,
  onTypeChange,
  selectedTier,
  selectedType,
}: IItemsAdvancedFiltersProps): JSX.Element => {
  const tierOptions: IFilterOption[] = [
    { id: 0, value: 'all', option: 'All Tiers' },
    ...Array.from({ length: 5 }, (_, i) => ({
      id: i + 1,
      value: String(i + 1),
      option: `Tier ${i + 1}`,
    })),
  ];

  const typeOptions: IFilterOption[] = [
    { id: 0, value: 'all', option: 'All Types' },
    ...Object.entries(ItemType).map(([, value], index) => ({
      id: index + 1,
      value: value as string,
      option: formatItemType(value as string),
    })),
  ];

  const hasActiveFilters = selectedTier !== 'all' || selectedType !== 'all';

  const handleClearFilters = () => {
    onTierChange('all');
    onTypeChange('all');
  };

  const sections: IFilterSection[] = [
    {
      type: 'dropdown',
      label: 'Tier',
      key: 'tier',
      options: tierOptions,
      value: selectedTier,
      onChange: onTierChange,
    },
    {
      type: 'dropdown',
      label: 'Item Type',
      key: 'type',
      options: typeOptions,
      value: selectedType,
      onChange: onTypeChange,
    },
  ];

  return (
    <AdvancedFilters
      isOpen={isOpen}
      onToggle={onToggle}
      sections={sections}
      onClearAll={handleClearFilters}
      hasActiveFilters={hasActiveFilters}
    />
  );
};
