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

interface IBestiaryAdvancedFiltersProps {
  isOpen: boolean;
  onToggle: () => void;
  onLevelRangeChange: (range: [number | undefined, number | undefined]) => void;
  onSubtypeChange: (value: string) => void;
  onAttackTypeChange: (value: string) => void;
  levelRange: [number | undefined, number | undefined];
  selectedSubtype: string;
  selectedAttackType: string;
}

export const BestiaryAdvancedFilters = ({
  isOpen,
  onToggle,
  onLevelRangeChange,
  onSubtypeChange,
  onAttackTypeChange,
  levelRange,
  selectedSubtype,
  selectedAttackType,
}: IBestiaryAdvancedFiltersProps): JSX.Element => {
  const subtypeOptions = [
    { id: 0, value: 'all', option: 'All Types' },
    ...Object.entries(NPCSubtype).map(([, value], index) => ({
      id: index + 1,
      value,
      option: formatItemType(value),
    })),
  ];

  const attackTypeOptions = [
    { id: 0, value: 'all', option: 'All Attack Types' },
    ...Object.entries(EntityAttackType).map(([, value], index) => ({
      id: index + 1,
      value,
      option: formatItemType(value),
    })),
  ];

  const hasActiveFilters =
    levelRange[0] !== undefined ||
    levelRange[1] !== undefined ||
    selectedSubtype !== 'all' ||
    selectedAttackType !== 'all';

  const handleClearFilters = () => {
    onLevelRangeChange([undefined, undefined]);
    onSubtypeChange('all');
    onAttackTypeChange('all');
  };

  const sections: IFilterSection[] = [
    {
      type: 'range',
      label: 'Level Range',
      key: 'level',
      value: levelRange,
      onChange: onLevelRangeChange,
    },
    {
      type: 'dropdown',
      label: 'Monster Type',
      key: 'subtype',
      options: subtypeOptions,
      value: selectedSubtype,
      onChange: onSubtypeChange,
    },
    {
      type: 'dropdown',
      label: 'Attack Type',
      key: 'attackType',
      options: attackTypeOptions,
      value: selectedAttackType,
      onChange: onAttackTypeChange,
    },
  ];

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