import { Meta, Story } from '@storybook/react';
import React from 'react';
import {
  INPCDialogProps,
  NPCDialog,
  NPCDialogType,
} from '../../../components/NPCDialog/NPCDialog';
import {
  IQuestionDialog,
  IQuestionDialogAnswer,
} from '../../../components/NPCDialog/QuestionDialog/QuestionDialog';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

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

    type: {
      control: {
        type: 'select',
        labels: {
          [NPCDialogType.TextOnly]: 'Text Only',
          [NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
        },
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<INPCDialogProps> = args => (
  <RPGUIRoot>
    <NPCDialog {...args} onClose={() => console.log('onClose')} />
  </RPGUIRoot>
);

// 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
export const TextAndThumbnail = Template.bind({});

TextAndThumbnail.args = {
  text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
  type: NPCDialogType.TextAndThumbnail,
};

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

TextOnly.args = {
  text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
  type: NPCDialogType.TextOnly,
};

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

const answers: IQuestionDialogAnswer[] = [
  {
    id: 1,
    text: 'I have lived here all my life',
    nextQuestionId: 2,
  },
  {
    id: 2,
    text: 'I came here from Newton',
    nextQuestionId: 3,
  },
  {
    id: 3,
    text: 'Oops! I mean, SpringVille!',
    nextQuestionId: 2,
  },
  {
    id: 4,
    text: 'I havent heard about any trouble',
    nextQuestionId: 4,
  },
  {
    id: 5,
    text: 'Who came here to die',
    nextQuestionId: 4,
  },
  {
    id: 6,
    text: 'Who came here to live',
    nextQuestionId: 4,
  },
];

const questions: IQuestionDialog[] = [
  {
    id: 1,
    text: `You dont Look Like from around here. Aren't you?`,
    answerIds: [1, 2],
  },
  {
    id: 2,
    text: 'Oh really!! then You must know my Bowler!',
    answerIds: [5, 6],
  },
  {
    id: 3,
    text: 'Newton!! I heard there is trouble brewing down here!!',
    answerIds: [3, 4],
  },
  {
    id: 4,
    text:
      'Dont you worry about it, say thats you have something to eat. Im starving',
  },
  {
    id: 5,
    text: 'You are a liar! there aint mr Browler! I made it',
  },
];

Question.args = {
  type: NPCDialogType.TextAndThumbnail,
  questions,
  answers,
  isQuestionDialog: true,
};
