import { Meta, Story } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import {
  Shortcuts,
  ShortcutsProps,
} from '../../../components/Shortcuts/Shortcuts';
import { SHORTCUTS_STORAGE_KEY } from '../../../components/Spellbook/constants';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';
import { itemContainerMock } from '../../../mocks/itemContainer.mocks';

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

export default meta;

const Template: Story<ShortcutsProps> = args => {
  return (
    <RPGUIRoot>
      <div
        style={{
          width: '100%',
        }}
      >
        <Shortcuts {...args} />
      </div>
    </RPGUIRoot>
  );
};

export const Default = Template.bind({});
Default.args = {
  onShortcutCast: spellKey => console.log(spellKey),
  shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
  mana: 100,
  atlasIMG,
  atlasJSON,
  inventory: itemContainerMock(),
};
