import { ChatMessageType, ILocalChatMessage } from '@rpg-engine/shared';
import { Meta, Story } from '@storybook/react';
import React from 'react';
import { ChatDeprecated } from '../../../components/Chatdeprecated/ChatDeprecated';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'Features/Chat System/ChatDeprecated',
  component: ChatDeprecated,
};

export default meta;

const chatMessagesMock = [
  {
    _id: 'test-id-1',
    message: 'test message',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-1',
    message: 'test message',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-2',
    message: 'Good morning!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-3',
    message: 'How are you doing?',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-4',
    message: 'Hey hey hey!!!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-5',
    message: 'BITCONNEEEEEEEEECT!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-6',
    message: 'BITCONNEEEEEEEEECT!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-7',
    message: 'BITCONNEEEEEEEEECT!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-8',
    message: 'BITCONNEEEEEEEEECT!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
  {
    _id: 'test-id-9',
    message: 'BITCONNEEEEEEEEECT!',
    emitter: {
      _id: 'someid',
      name: 'Guilherme',
    },
    type: ChatMessageType.Local,
    x: 128,
    y: 128,
    scene: 'MainScene',
    createdAt: '2020-08-20T16:00:00.000Z',
    updatedAt: '2020-08-20T16:00:00.000Z',
  },
];

const Template: Story<ILocalChatMessage[]> = args => (
  <RPGUIRoot>
    <ChatDeprecated
      onSendChatMessage={msg => console.log(msg)}
      chatMessages={chatMessagesMock}
      opacity={0.5}
      height={'200px'}
      onCloseButton={() => console.log('closing chat...')}
      {...args}
    />
  </RPGUIRoot>
);

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