import {useArgs} from '@storybook/preview-api';
import {fn} from '@storybook/test';

import Hotbar from '@/react/components/hotbar.jsx';

import DomDecorator from './dom-decorator.jsx';

const slots = Array(10).fill({});
slots[2] = {qty: 24, icon: '/resources/potion/icon.png'};

export default {
  title: 'Dom/Inventory/Hotbar',
  component: Hotbar,
  decorators: [
    (Hotbar, ctx) => {
      const [, updateArgs] = useArgs();
      const {onSlotMouseDown} = ctx.args;
      ctx.args.onSlotMouseDown = (i) => {
        updateArgs({active: i});
        if (onSlotMouseDown) {
          onSlotMouseDown(i);
        }
      };
      return Hotbar();
    },
    DomDecorator({
      style: {
        display: 'flex',
        flexDirection: 'column',
      },
    }),
  ],
  tags: ['autodocs'],
  args: {
    active: 0,
    onSlotMouseDown: fn(),
    slots,
  },
  argTypes: {
    active: {
      control: {
        type: 'number',
        min: 0,
        max: 9,
      }
    },
  },
};

export const Default = {};