import { IItem, ItemType } from '@rpg-engine/shared';
import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import {
  GemSelector,
  IGemSelectorProps,
} from '../../../components/itemSelector/GemSelector';

const meta: Meta<IGemSelectorProps> = {
  title: 'UI/Dropdowns & Selectors/Gem Selector',
  component: GemSelector,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<IGemSelectorProps> = args => (
  <RPGUIRoot>
    <GemSelector {...args} />
  </RPGUIRoot>
);

const mockItem = ({
  _id: '123',
  name: 'Example Item',
  type: ItemType.Armor,
  texturePath: 'weapons/sword.png',
  attachedGems: [
    {
      key: 'emerald-gem',
      name: 'Emerald of Power',
      texturePath: 'gems/emerald-gem.png',
    },
    {
      key: 'ruby-gem',
      name: 'Ruby of Fire',
      texturePath: 'gems/ruby-gem.png',
    },
    {
      key: 'sapphire-gem',
      name: 'Sapphire of Wisdom',
      texturePath: 'gems/sapphire-gem.png',
    },
    {
      key: 'earthstone-gem',
      name: 'EarthStone Guardian',
      texturePath: 'gems/earthstone-gem.png',
    },
  ],
} as unknown) as IItem;

export const Default = Template.bind({});
Default.args = {
  atlasJSON: require('../../../mocks/atlas/items/items.json'),
  atlasIMG: require('../../../mocks/atlas/items/items.png'),
  item: mockItem,
  onClose: () => console.log('Closing Gem Selector'),
  onSelect: gems =>
    console.log(
      'Selected gems:',
      gems.map(gem => gem.name)
    ), // Agora imprime os nomes das gemas
};
