import { ItemRarities, ItemSubType } from '@rpg-engine/shared';
import React from 'react';
import { IOptionsProps } from '../../Dropdown';

export enum OrderByType {
  Name = 'Name',
  Price = 'Price',
}

export const itemTypeOptions: IOptionsProps[] = [
  'Type',
  ...Object.keys(ItemSubType),
]
  .filter(type => type !== 'DeadBody')
  .map((itemType, index) => ({
    id: index + 1,
    value: itemType,
    option: itemType,
  }));

export const itemRarityOptions: IOptionsProps[] = [
  'Rarity',
  ...Object.values(ItemRarities),
].map((itemRarity, index) => ({
  id: index + 1,
  value: itemRarity,
  option: itemRarity,
}));

export const orderByOptions: IOptionsProps[] = Object.values(
  OrderByType
).flatMap((orderBy, index) => [
  {
    id: index * 2 + 1,
    value: orderBy.toLowerCase(),
    option: (
      <>
        {orderBy}{' '}
        <span
          style={{
            transform: 'translateY(-2px)',
            display: 'inline-block',
          }}
        >
          ↑
        </span>
      </>
    ),
  },
  {
    id: index * 2 + 2,
    value: '-' + orderBy.toLowerCase(),
    option: (
      <>
        {orderBy}{' '}
        <span
          style={{
            transform: 'translateY(-2px)',
            display: 'inline-block',
          }}
        >
          ↓
        </span>
      </>
    ),
  },
]);
