import { Meta, Story } from '@storybook/react';
import React from 'react';
import aliceDefaultThumbnail from '../../../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
import {
  INPCMultiDialogProps,
  ImgSide,
  NPCMultiDialog,
  NPCMultiDialogType,
} from '../../../components/NPCDialog/NPCMultiDialog';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'NPC/Dialog/NPC MultiDialog',
  component: NPCMultiDialog,
  argTypes: {
    text: {
      control: {
        type: 'text',
      },
    },
    // ImgSide: {
    //   control: {
    //     type: 'select',
    //     label: {
    //       [ImgSide.right]: 'right',
    //       [ImgSide.left]: 'left',
    //     },
    //   },
    // },
    imagePath: {
      control: {
        type: 'text',
      },
    },
  },
};

export default meta;

const Template: Story<INPCMultiDialogProps> = args => (
  <RPGUIRoot>
    <NPCMultiDialog {...args} />
  </RPGUIRoot>
);

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

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing

const textAndTypeArray: NPCMultiDialogType[] = [
  {
    text: 'I have lived here all my life',
    imagePath: aliceDefaultThumbnail,
    imageSide: ImgSide.right,
  },
  {
    text: 'I have lived here all my life',
    imagePath: aliceDefaultThumbnail,
    imageSide: ImgSide.left,
  },
  {
    text: 'I have lived here all my life',
    imagePath: aliceDefaultThumbnail,
    imageSide: ImgSide.right,
  },
];

NPCMultiDialogStore.args = {
  textAndTypeArray,
};
