import { Meta, Story } from '@storybook/react';
import React from 'react';
import {
  HistoryDialog,
  IHistoryDialogProps,
} from '../../../components/HistoryDialog';
import ImgBackground01 from '../../../components/NPCDialog/img/background01.png';
import ImgBackground02 from '../../../components/NPCDialog/img/background02.png';
import ImgBackground03 from '../../../components/NPCDialog/img/background03.png';
import aliceDefaultThumbnail from '../../../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
import {
  ImgSide,
  NPCMultiDialogType,
} from '../../../components/NPCDialog/NPCMultiDialog';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'NPC/Dialog/NPC History Dialog',
  component: HistoryDialog,
  argTypes: {
    text: {
      control: {
        type: 'text',
      },
    },
  },
};

export default meta;

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

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

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,
  },
];

HistoryDialogStore.args = {
  textAndTypeArray,
  fullCoverBackground: true,
  backgroundImgPath: [ImgBackground01, ImgBackground02, ImgBackground03],
};
