import { ChatMessageType } from '@rpg-engine/shared';
import { Meta, Story } from '@storybook/react';
import React from 'react';

import { ChatRevamp } from '../../../components/ChatRevamp/ChatRevamp';
import { IChatRevampProps } from '../../../components/ChatRevamp/types';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

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

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: 'someid1',
      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: 'someid2',
      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: 'someid3',
      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: 'someid4',
      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: 'someid5',
      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: 'someid6',
      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: 'someid7',
      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 tabsMock = [
  { label: 'Local', id: 'local' },
  { label: 'Global', id: 'global' },
  { label: 'Private', id: 'private' },
  { label: 'Trade', id: 'trade' },
  { label: 'Guild', id: 'guild' },
];

const recentPrivateChatCharactersMock = [
  { _id: 'someid', name: 'Guilhermexxxxxxxxxxxx' },
  { _id: 'someid2', name: 'Guilherme2' },
  { _id: 'someid3', name: 'Guilherme2' },
  { _id: 'someid4', name: 'Guilherme2' },
  { _id: 'someid5', name: 'Guilherme2' },
  { _id: 'someid6', name: 'Guilherme2' },
  { _id: 'someid7', name: 'Guilherme2' },
  { _id: 'someid8', name: 'Guilherme2' },
  { _id: 'someid9', name: 'Guilherme2' },
  { _id: 'someid10', name: 'Guilherme2' },
];

const defaultArgs = {
  chatMessages: chatMessagesMock,
  tabs: tabsMock,
  privateChatCharacters: recentPrivateChatCharactersMock,
  styles: { width: 'calc(100% - 0.5rem * 2)', height: '200px' },
  onCloseButton: () => console.log('Closing chat...'),
  onChangeTab: (tab: typeof tabsMock[number]['id']) =>
    console.log('Changing tab to:', tab),
};

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

// Local
export const Default = Template.bind({});
Default.args = {
  ...defaultArgs,
  activeTab: 'local',
  onSendLocalChatMessage: value =>
    console.log('Sending local chat message:', value),
};

export const Global = Template.bind({});
Global.args = {
  ...defaultArgs,
  activeTab: 'global',
  onSendGlobalChatMessage: value =>
    console.log('Sending global chat message:', value),
};

export const Private = Template.bind({});
Private.args = {
  ...defaultArgs,
  activeTab: 'private',
  recentSelectedChatCharacterId: recentPrivateChatCharactersMock[0]._id,
  unseenMessageCharacterIds: [recentPrivateChatCharactersMock[0]._id],
  onSendPrivateChatMessage: value =>
    console.log('Sending private chat message:', value),
};

export const Trade = Template.bind({});
Trade.args = {
  ...defaultArgs,
  activeTab: 'trade',
  onSendTradeMessage: value => console.log('Sending trade message:', value),
};

export const Guild = Template.bind({});
Guild.args = {
  ...defaultArgs,
  activeTab: 'guild',
  onSendGuildChatMessage: value =>
    console.log('Sending guild chat message:', value),
};
