import { ITradeResponseItem } from '@rpg-engine/shared';
import { Meta } from '@storybook/react';
import React, { useState } from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import { TradingItemRow } from '../../../components/TradingMenu/TradingItemRow';
import { itemMock } from '../../../components/TradingMenu/items.mock';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';

const meta: Meta = {
  title: 'Features/Trading/Trading Item',
  component: TradingItemRow,
};
export default meta;

export const Default = () => {
  const [selectedQty, setSelectedQty] = useState(0);

  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
    console.log(item);
    setSelectedQty(qty);
  };

  return (
    <RPGUIRoot>
      <TradingItemRow
        atlasIMG={atlasIMG}
        atlasJSON={atlasJSON}
        onQuantityChange={handleOnChange}
        selectedQty={selectedQty}
        traderItem={itemMock[0]}
      />
    </RPGUIRoot>
  );
};
