import { ITradeRequestItem } from '@rpg-engine/shared';
import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import {
  ITradingMenu,
  TradingMenu,
} from '../../../components/TradingMenu/TradingMenu';
import { itemMock } from '../../../components/TradingMenu/items.mock';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';
import { equipmentSetMock } from '../../../mocks/equipmentSet.mocks';

const meta: Meta = {
  title: 'Features/Trading/Trading Menu',
  component: TradingMenu,
};

export default meta;

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

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

const onConfirm = (items: ITradeRequestItem[]) => {
  console.log('on confirm trading menu');
  console.log(items);
};

const onClose = () => {
  console.log('close');
};

Default.args = {
  traderItems: itemMock,
  onClose: onClose,
  onConfirm: onConfirm,
  type: 'buy',
  atlasJSON: atlasJSON,
  atlasIMG: atlasIMG,
  characterAvailableGold: 1000,
  equipmentSet: equipmentSetMock,
};
