import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import { Marketplace } from '../../../components/Marketplace/Marketplace';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';
import { equipmentSetMock } from '../../../mocks/equipmentSet.mocks';
import { items } from '../../../mocks/itemContainer.mocks';

const meta: Meta = {
  title: 'Features/Marketplace/Marketplace',
  component: Marketplace,
};

export default meta;

const Template: Story = () => {
  const [page, setPage] = React.useState(1);

  return (
    <RPGUIRoot>
      <Marketplace
        onChangeOrder={value => console.log(value)}
        onChangeRarity={value => console.log(value)}
        onChangeType={value => console.log(value)}
        onChangeNameInput={event => console.log(event)}
        onChangePriceInput={value => console.log(value)}
        onChangeMainLevelInput={value => console.log(value)}
        onChangeSecondaryLevelInput={value => console.log(value)}
        atlasIMG={atlasIMG}
        atlasJSON={atlasJSON}
        onClose={() => console.log('close')}
        items={items.map(item => ({
          item,
          price: Math.round(Math.random() * 1000),
          _id: Math.random().toString(),
          owner: Math.random().toString(),
        }))}
        equipmentSet={equipmentSetMock}
        onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
        availableGold={0}
        selectedItemToSell={null}
        onSelectedItemToSellRemove={() => console.log('click')}
        onYourPanelToggle={() => console.log('toggle')}
        onAddItemToMarketplace={() => console.log('add')}
        characterId="1"
        onMoneyWithdraw={() => console.log('withdraw')}
        totalItems={100}
        currentPage={page}
        itemsPerPage={30}
        onPageChange={setPage}
      />
    </RPGUIRoot>
  );
};

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