import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
import { Meta, Story } from '@storybook/react';
import React from 'react';

import {
  EquipmentSet,
  IEquipmentSetProps,
} from '../../../components/Equipment/EquipmentSet';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import atlasJSON from '../../../mocks/atlas/items/items.json';
import atlasIMG from '../../../mocks/atlas/items/items.png';
import { equipmentSetMock } from '../../../mocks/equipmentSet.mocks';
import { IPosition } from '../../../types/eventTypes';

const meta: Meta = {
  title: 'Character/Equipment/Equipment Set',
  component: EquipmentSet,
};

export default meta;

const onMouseOver = (event: any, slotIndex: number, item: IItem | null) => {
  if (!item) {
    console.log(`Free at ${slotIndex},${event}`);
    return;
  }
};

const onItemClick = (
  ItemType: ItemType,
  item: IItem,
  itemContainerType: ItemContainerType | null
) => {
  console.log(item, ItemType, itemContainerType, 'was clicked!');
};

const onSelected = (payload: string) => {
  console.log('dispatch', payload);
};

const onItemOutsideDrop = (item: IItem, position: IPosition) => {
  console.log('dropped outside', item, position);
};

const Template: Story<IEquipmentSetProps> = args => (
  <RPGUIRoot>
    <EquipmentSet
      {...args}
      equipmentSet={equipmentSetMock}
      onClose={() => console.log('closing Equipment Set Container')}
      onMouseOver={onMouseOver}
      onSelected={onSelected}
      onItemClick={onItemClick}
      onItemDragEnd={_quantity => {}}
      onItemDragStart={item => console.log('drag start: ', item._id)}
      onItemPlaceDrop={item => console.log('dropped to: ', item?._id)}
      checkIfItemCanBeMoved={() => false}
      type={ItemContainerType.Equipment}
      atlasIMG={atlasIMG}
      atlasJSON={atlasJSON}
      onItemOutsideDrop={onItemOutsideDrop}
    />
  </RPGUIRoot>
);

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