import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
  IOptionsItemSelectorProps,
  ItemSelector,
} from '../../../components/itemSelector/ItemSelector';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';

const meta: Meta = {
  title: 'UI/Dropdowns & Selectors/Item Selector',
  component: ItemSelector,
};

export default meta;

const Template: Story = args => (
  <RPGUIRoot>
    <ItemSelector
      atlasIMG={atlasIMG}
      atlasJSON={atlasJSON}
      options={options}
      onSelect={onSelect}
      onClose={() => console.log('closing Equipment Set Container')}
      {...args}
    />
  </RPGUIRoot>
);

export const Default = Template.bind({});

const onSelect = (value: string): void => {
  console.log('Story package', value);
};

const options: IOptionsItemSelectorProps[] = [
  {
    name: 'Human',
    description: 'Human',
    imageKey: 'axes/frost-double-axe.png',
  },
  {
    name: 'Human',
    description: 'Human',
    imageKey: 'maces/spiked-club.png',
  },
  {
    name: 'Human2',
    description: 'Human2',
    imageKey: 'axes/frost-double-axe.png',
  },
  {
    name: 'Human3',
    description: 'Human3',
    imageKey: 'maces/spiked-club.png',
  },
  {
    name: 'Human4',
    description: 'Human4',
    imageKey: 'axes/frost-double-axe.png',
  },
  {
    name: 'Human5',
    description: 'Human5',
    imageKey: 'maces/spiked-club.png',
  },
  {
    name: 'Human6',
    description: 'Human6',
    imageKey: 'axes/frost-double-axe.png',
  },
];

Default.args = {
  options,
};
