import React from 'react';
import { ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import MessageComponent from './Message';
import { E2E_MESSAGE_TYPE } from '../../lib/constants/keys';
import { messagesStatus } from '../../lib/constants/messagesStatus';
import { themes } from '../../lib/constants/colors';
import MessageSeparator from '../MessageSeparator';
import {
	BASE_ROW_HEIGHT,
	BASE_ROW_HEIGHT_CONDENSED,
	FONT_SCALE_LIMIT,
	ResponsiveLayoutContext
} from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
import { mockedStore as store } from '../../reducers/mockedStore';
import { updateSettings } from '../../actions/settings';

const _theme = 'light';

const user = {
	id: 'y8bd77ptZswPj3EW8',
	username: 'diego.mello',
	token: 'abc'
};
const author = {
	_id: 'userid',
	username: 'diego.mello'
};

const shortNameAuthor = {
	_id: 'userid1',
	username: 'jd',
	name: 'JD'
};

const mediumNameAuthor = {
	_id: 'userid2',
	username: 'john.doe',
	name: 'John Doe'
};

const longNameAuthor = {
	_id: 'userid3',
	username: 'johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername',
	name: 'John Doe With An Extremely Long Display Name That Should Definitely Be Truncated In Any Reasonable User Interface Layout'
};

const baseUrl = 'https://open.rocket.chat';
const date = new Date(2017, 10, 10, 10);
const longText =
	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';

store.dispatch(updateSettings('API_Embed', true));

const responsiveLayoutProviderLargeFontValue = (fontScale: number) => ({
	fontScale,
	fontScaleLimited: fontScale,
	isLargeFontScale: fontScale > 1,
	rowHeight: BASE_ROW_HEIGHT * fontScale,
	rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED * fontScale,
	width: 350,
	height: 800
});

const getCustomEmoji = (content: string) => {
	const customEmoji = {
		marioparty: { name: content, extension: 'gif' },
		react_rocket: { name: content, extension: 'png' },
		nyan_rocket: { name: content, extension: 'png' }
	}[content];
	return customEmoji;
};

export default {
	title: 'Message',
	decorators: [
		(Story: any) => (
			<NavigationContainer>
				<ScrollView style={{ backgroundColor: themes[_theme].surfaceRoom }}>
					<Story />
				</ScrollView>
			</NavigationContainer>
		)
	]
};

export const Message = (props: any) => (
	<ResponsiveLayoutContext.Provider value={responsiveLayoutProviderLargeFontValue(1)}>
		<MessageComponent
			baseUrl={baseUrl}
			user={user}
			author={author}
			ts={date}
			timeFormat='LT'
			isHeader
			getCustomEmoji={getCustomEmoji}
			theme={_theme}
			{...props}
		/>
	</ResponsiveLayoutContext.Provider>
);

// The large font components are not perfect because the text's font scale increases only with the device's font size setting.
const MessageLargeFont = (props: any) => (
	<ResponsiveLayoutContext.Provider value={responsiveLayoutProviderLargeFontValue(FONT_SCALE_LIMIT)}>
		<MessageComponent
			baseUrl={baseUrl}
			user={user}
			author={author}
			ts={date}
			timeFormat='LT'
			isHeader
			getCustomEmoji={getCustomEmoji}
			theme={_theme}
			{...props}
		/>
	</ResponsiveLayoutContext.Provider>
);

export const Basic = () => (
	<>
		<Message msg='Message' />
		<Message msg={longText} />
	</>
);

export const BasicLargeFont = () => (
	<>
		<MessageLargeFont msg='Message' />
		<MessageLargeFont msg={longText} />
	</>
);

export const GroupedMessages = () => (
	<>
		<Message msg='...' />
		<Message
			msg='Different user'
			author={{
				...author,
				username: longText
			}}
		/>
		<Message msg='This is the third message' isHeader={false} />
		<Message msg='This is the second message' isHeader={false} />
		<Message msg='This is the first message' />
	</>
);

export const GroupedMessagesLargeFont = () => (
	<>
		<MessageLargeFont msg='...' />
		<MessageLargeFont
			msg='Different user'
			author={{
				...author,
				username: longText
			}}
		/>
		<MessageLargeFont msg='This is the third message' isHeader={false} />
		<MessageLargeFont msg='This is the second message' isHeader={false} />
		<MessageLargeFont msg='This is the first message' />
	</>
);

export const WithoutHeader = () => <Message msg='Message' isHeader={false} />;

export const WithoutHeaderLargeFont = () => <MessageLargeFont msg='Message' isHeader={false} />;

export const WithAlias = () => (
	<>
		<Message msg='Message' alias='Diego Mello' />
		<Message
			msg='Message'
			author={{
				...author,
				username: longText
			}}
			alias='Diego Mello'
		/>
	</>
);

export const WithAliasLargeFont = () => (
	<>
		<MessageLargeFont msg='Message' alias='Diego Mello' />
		<MessageLargeFont
			msg='Message'
			author={{
				...author,
				username: longText
			}}
			alias='Diego Mello'
		/>
	</>
);

export const Edited = () => (
	<>
		<Message msg='Message header' isEdited />
		<Message msg='Message without header' isEdited isHeader={false} />
	</>
);

export const EditedLargeFont = () => (
	<>
		<MessageLargeFont msg='Message header' isEdited />
		<MessageLargeFont msg='Message without header' isEdited isHeader={false} />
	</>
);

export const Pinned = () => (
	<>
		<Message msg='Message header' pinned />
		<Message msg='Message without header' pinned isHeader={false} />
	</>
);

export const PinnedLargeFont = () => (
	<>
		<MessageLargeFont msg='Message header' pinned />
		<MessageLargeFont msg='Message without header' pinned isHeader={false} />
	</>
);

export const Translated = () => (
	<>
		<Message
			msg='Message translated'
			md={[
				{
					type: 'PARAGRAPH',
					value: [
						{
							type: 'PLAIN_TEXT',
							value: 'md is never translated'
						}
					]
				}
			]}
			isTranslated
		/>
	</>
);

export const TranslatedLargeFont = () => (
	<MessageLargeFont
		msg='Message translated'
		md={[
			{
				type: 'PARAGRAPH',
				value: [
					{
						type: 'PLAIN_TEXT',
						value: 'md is never translated'
					}
				]
			}
		]}
		isTranslated
	/>
);

export const Encrypted = () => (
	<>
		<Message msg='Message' type='e2e' />
		<Message msg='Message Encrypted without Header' isHeader={false} type='e2e' />
		<Message
			msg='Message Encrypted with Reactions'
			reactions={[
				{
					emoji: ':joy:',
					usernames: [user.username]
				},
				{
					emoji: ':marioparty:',
					usernames: [user.username]
				},
				{
					emoji: ':thinking:',
					usernames: [user.username]
				}
			]}
			onReactionPress={() => {}}
			type='e2e'
		/>
		<Message msg='Thread reply encrypted' tmid='1' tmsg='Thread with emoji :) :joy:' isThreadReply type='e2e' />
		<Message msg='Temp message encrypted' status={messagesStatus.TEMP} isTemp type='e2e' />
		<Message msg='Message Edited encrypted' edited type='e2e' />
		<Message
			hasError
			msg='This message has error and is encrypted'
			status={messagesStatus.ERROR}
			onErrorPress={() => alert('Error pressed')}
			type='e2e'
		/>
		<Message msg='Read Receipt encrypted with Header' isReadReceiptEnabled read type='e2e' />
		<Message msg='Read Receipt encrypted without Header' isReadReceiptEnabled read isHeader={false} type='e2e' />
	</>
);

export const EncryptedLargeFont = () => (
	<>
		<MessageLargeFont msg='Message' type='e2e' />
		<MessageLargeFont msg='Message Encrypted without Header' isHeader={false} type='e2e' />
		<MessageLargeFont
			msg='Message Encrypted with Reactions'
			reactions={[
				{
					emoji: ':joy:',
					usernames: [user.username]
				},
				{
					emoji: ':marioparty:',
					usernames: [user.username]
				},
				{
					emoji: ':thinking:',
					usernames: [user.username]
				}
			]}
			onReactionPress={() => {}}
			type='e2e'
		/>
		<MessageLargeFont msg='Thread reply encrypted' tmid='1' tmsg='Thread with emoji :) :joy:' isThreadReply type='e2e' />
		<MessageLargeFont msg='Temp message encrypted' status={messagesStatus.TEMP} isTemp type='e2e' />
		<MessageLargeFont msg='Message Edited encrypted' edited type='e2e' />
		<MessageLargeFont
			hasError
			msg='This message has error and is encrypted'
			status={messagesStatus.ERROR}
			onErrorPress={() => alert('Error pressed')}
			type='e2e'
		/>
		<MessageLargeFont msg='Read Receipt encrypted with Header' isReadReceiptEnabled read type='e2e' />
		<MessageLargeFont msg='Read Receipt encrypted without Header' isReadReceiptEnabled read isHeader={false} type='e2e' />
	</>
);

export const BlockQuote = () => (
	<>
		<Message msg='> Testing block quote' />
		<Message msg={'> Testing block quote\nTesting block quote'} />
	</>
);

export const BlockQuoteLargeFont = () => (
	<>
		<MessageLargeFont msg='> Testing block quote' />
		<MessageLargeFont msg={'> Testing block quote\nTesting block quote'} />
	</>
);

export const Lists = () => (
	<>
		<Message msg={'* Dogs\n* cats\n- cats'} />
		<Message msg={'1. Dogs \n2. Cats'} />
		<Message msg='1. Dogs' />
		<Message msg='2. Cats' isHeader={false} />
	</>
);

export const ListsLargeFont = () => (
	<>
		<MessageLargeFont msg={'* Dogs\n* cats\n- cats'} />
		<MessageLargeFont msg={'1. Dogs \n2. Cats'} />
		<MessageLargeFont msg='1. Dogs' />
		<MessageLargeFont msg='2. Cats' isHeader={false} />
	</>
);

export const StaticAvatar = () => (
	<Message msg='Message' avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg' />
);

export const StaticAvatarLargeFont = () => (
	<MessageLargeFont msg='Message' avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg' />
);

export const FullName = () => (
	<Message
		msg='Message'
		author={{
			...author,
			username: 'diego.mello',
			name: 'Diego Mello'
		}}
		useRealName
	/>
);

export const FullNameLargeFont = () => (
	<MessageLargeFont
		msg='Message'
		author={{
			...author,
			username: 'diego.mello',
			name: 'Diego Mello'
		}}
		useRealName
	/>
);

export const Names = () => (
	<>
		<Message msg='Small name (2 chars)' author={shortNameAuthor} useRealName />
		<Message
			msg='Small name with icons'
			author={shortNameAuthor}
			useRealName
			isEdited
			isTranslated
			pinned
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
		<Message msg='Medium name (8 chars)' author={mediumNameAuthor} useRealName />
		<Message
			msg='Medium name with icons'
			author={mediumNameAuthor}
			useRealName
			isEdited
			isTranslated
			pinned
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
		<Message msg='Long name (22 chars) - should truncate' author={longNameAuthor} useRealName />
		<Message
			msg='Long name with icons - timestamp visible'
			author={longNameAuthor}
			useRealName
			isEdited
			isTranslated
			pinned
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
	</>
);

export const Usernames = () => (
	<>
		<Message msg='Small username (2 chars)' author={shortNameAuthor} />
		<Message
			msg='Small username with icons'
			author={shortNameAuthor}
			isEdited
			isTranslated
			pinned
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
		<Message msg='Medium username (8 chars)' author={mediumNameAuthor} />
		<Message
			msg='Medium username with icons'
			author={mediumNameAuthor}
			isEdited
			isTranslated
			pinned
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
		<Message msg='Long username (22 chars) - should truncate' author={longNameAuthor} />
		<Message
			msg='Long username with icons - timestamp visible'
			author={longNameAuthor}
			isEdited
			isTranslated
			pinned
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
	</>
);

const msgMentions = '@rocket.cat @diego.mello @all @here #general @team';
const mentions = [
	{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat', type: 'user' },
	{ _id: 'random2', name: 'Diego Mello', username: 'diego.mello', type: 'user' },
	{ _id: 'here', username: 'here', type: 'user' },
	{ _id: 'all', username: 'all', type: 'user' },
	{ _id: 'team', name: 'team', type: 'team' }
];

export const Mentions = () => (
	<>
		<Message
			msg={msgMentions}
			mentions={mentions}
			channels={[
				{
					name: 'general'
				}
			]}
		/>
		<Message
			msg='@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua.'
			mentions={mentions}
			channels={[
				{
					name: 'general'
				}
			]}
		/>
	</>
);

export const MentionsLargeFont = () => (
	<>
		<MessageLargeFont
			msg={msgMentions}
			mentions={mentions}
			channels={[
				{
					name: 'general'
				}
			]}
		/>
		<MessageLargeFont
			msg='@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua.'
			mentions={mentions}
			channels={[
				{
					name: 'general'
				}
			]}
		/>
	</>
);

export const Emojis = () => (
	<>
		<Message msg='👊🤙👏' />
		<Message msg='👏' />
		<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
		<Message msg=':react_rocket:' />
		<Message msg='🤙:react_rocket:' />
		<Message msg='🤙:react_rocket:🤙🤙' />
	</>
);

export const EmojisLargeFont = () => (
	<>
		<MessageLargeFont msg='👊🤙👏' />
		<MessageLargeFont msg='👏' />
		<MessageLargeFont msg=':react_rocket: :nyan_rocket: :marioparty:' />
		<MessageLargeFont msg=':react_rocket:' />
		<MessageLargeFont msg='🤙:react_rocket:' />
		<MessageLargeFont msg='🤙:react_rocket:🤙🤙' />
	</>
);

export const TimeFormat = () => <Message msg='Testing' timeFormat='DD MMMM YYYY' />;

export const TimeFormatLargeFont = () => <MessageLargeFont msg='Testing' timeFormat='DD MMMM YYYY' />;

export const Reactions = () => (
	<>
		<Message
			msg='Reactions'
			reactions={[
				{
					emoji: ':joy:',
					usernames: [user.username]
				},
				{
					emoji: ':marioparty:',
					usernames: new Array(99)
				},
				{
					emoji: ':thinking:',
					usernames: new Array(999)
				},
				{
					emoji: ':thinking:',
					usernames: new Array(9999)
				}
			]}
			onReactionPress={() => {}}
		/>
		<Message
			msg='Multiple Reactions'
			reactions={[
				{
					emoji: ':marioparty:',
					usernames: [user.username]
				},
				{
					emoji: ':react_rocket:',
					usernames: [user.username]
				},
				{
					emoji: ':nyan_rocket:',
					usernames: [user.username]
				},
				{
					emoji: ':heart:',
					usernames: [user.username]
				},
				{
					emoji: ':dog:',
					usernames: [user.username]
				},
				{
					emoji: ':grinning:',
					usernames: [user.username]
				},
				{
					emoji: ':grimacing:',
					usernames: [user.username]
				},
				{
					emoji: ':grin:',
					usernames: [user.username]
				}
			]}
			onReactionPress={() => {}}
		/>
	</>
);

export const ReactionsLargeFont = () => (
	<>
		<MessageLargeFont
			msg='Reactions'
			reactions={[
				{
					emoji: ':joy:',
					usernames: [user.username]
				},
				{
					emoji: ':marioparty:',
					usernames: new Array(99)
				},
				{
					emoji: ':thinking:',
					usernames: new Array(999)
				},
				{
					emoji: ':thinking:',
					usernames: new Array(9999)
				}
			]}
			onReactionPress={() => {}}
		/>
		<MessageLargeFont
			msg='Multiple Reactions'
			reactions={[
				{
					emoji: ':marioparty:',
					usernames: [user.username]
				},
				{
					emoji: ':react_rocket:',
					usernames: [user.username]
				},
				{
					emoji: ':nyan_rocket:',
					usernames: [user.username]
				},
				{
					emoji: ':heart:',
					usernames: [user.username]
				},
				{
					emoji: ':dog:',
					usernames: [user.username]
				},
				{
					emoji: ':grinning:',
					usernames: [user.username]
				},
				{
					emoji: ':grimacing:',
					usernames: [user.username]
				},
				{
					emoji: ':grin:',
					usernames: [user.username]
				}
			]}
			onReactionPress={() => {}}
		/>
	</>
);

export const DateAndUnreadSeparators = () => (
	<>
		<Message
			msg='Fourth message'
			author={{
				...author,
				username: 'rocket.cat'
			}}
		/>
		<MessageSeparator ts={date} unread />
		<Message msg='Third message' />
		<MessageSeparator unread ts={null} />
		<Message
			msg='Second message'
			author={{
				...author,
				username: 'rocket.cat'
			}}
			isHeader={false}
		/>
		<Message
			msg='Second message'
			author={{
				...author,
				username: 'rocket.cat'
			}}
		/>
		<MessageSeparator ts={date} unread={false} />
		<Message msg='First message' />
	</>
);

export const DateAndUnreadSeparatorsLargeFont = () => (
	<>
		<MessageLargeFont
			msg='Fourth message'
			author={{
				...author,
				username: 'rocket.cat'
			}}
		/>
		<MessageSeparator ts={date} unread />
		<MessageLargeFont msg='Third message' />
		<MessageSeparator unread ts={null} />
		<MessageLargeFont
			msg='Second message'
			author={{
				...author,
				username: 'rocket.cat'
			}}
			isHeader={false}
		/>
		<MessageLargeFont
			msg='Second message'
			author={{
				...author,
				username: 'rocket.cat'
			}}
		/>
		<MessageSeparator ts={date} unread={false} />
		<MessageLargeFont msg='First message' />
	</>
);

const base64 =
	'data:image/png;base64, ';

export const WithImage = () => (
	<>
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					image_url: '/dummypath'
				}
			]}
		/>
		<Message
			msg='Message, not description'
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					image_url: '/dummypath'
				},
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					image_url: '/dummypath'
				},
				{
					title: 'This is a title',
					image_url: '/dummypath'
				}
			]}
		/>
		<Message
			msg='multi file'
			attachments={[
				{
					title: 'This is a title',
					image_url: '/dummypath'
				},
				{
					title: 'This is a title',
					image_url: '/dummypath'
				}
			]}
		/>
		<Message
			attachments={[
				{
					title: 'Base64 Attachment',
					description: 'This is a description for Base64 Attachment :nyan_rocket:',
					image_url: base64
				}
			]}
		/>
	</>
);

export const WithImageLargeFont = () => (
	<>
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description',
					image_url: '/dummypath'
				}
			]}
		/>
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'Header false',
					image_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
		<Message
			msg='multi file'
			attachments={[
				{
					title: 'This is a title',
					image_url: '/dummypath'
				},
				{
					title: 'This is a title',
					image_url: '/dummypath'
				}
			]}
		/>
		<MessageLargeFont
			attachments={[
				{
					title: 'Base64 Attachment',
					description: 'This is a description for Base64 Attachment :nyan_rocket:',
					image_url: base64
				}
			]}
		/>
	</>
);

export const WithVideo = () => (
	<>
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					video_url: '/dummypath'
				}
			]}
		/>
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'Header false',
					video_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
		<Message
			msg='multi file'
			attachments={[
				{
					title: 'This is a title',
					video_url: '/dummypath'
				},
				{
					title: 'This is a title',
					video_url: '/dummypath'
				}
			]}
		/>
	</>
);

export const WithVideoLargeFont = () => (
	<>
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					video_url: '/dummypath'
				}
			]}
		/>
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					video_url: '/dummypath'
				}
			]}
		/>
		<MessageLargeFont
			msg='multi file'
			attachments={[
				{
					title: 'This is a title',
					video_url: '/dummypath'
				},
				{
					title: 'This is a title',
					video_url: '/dummypath'
				}
			]}
		/>
	</>
);

export const WithAudio = () => (
	<>
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					audio_url: '/dummypath'
				}
			]}
		/>
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'Header false',
					audio_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
		<Message
			msg='multi file'
			attachments={[
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				},
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
		<Message
			attachments={[
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				},
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					audio_url: '/dummypath'
				},
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
	</>
);

export const WithAudioLargeFont = () => (
	<>
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					audio_url: '/dummypath'
				}
			]}
		/>
		<MessageLargeFont msg='First message' isHeader={false} />
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description',
					audio_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
		<MessageLargeFont
			msg='multi file'
			attachments={[
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				},
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					audio_url: '/dummypath'
				},
				{
					title: 'This is a title',
					audio_url: '/dummypath'
				}
			]}
			isHeader={false}
		/>
	</>
);

export const WithFile = () => (
	<>
		<Message
			attachments={[
				{
					text: 'File.pdf',
					description: 'This is a description :nyan_rocket:'
				}
			]}
		/>
		<Message
			attachments={[
				{
					text: 'File.pdf',
					description: 'This is a description :nyan_rocket:'
				},
				{
					text: 'File.pdf',
					description: 'This is a description :nyan_rocket:'
				}
			]}
			isHeader={false}
		/>
	</>
);

export const WithFileLargeFont = () => (
	<>
		<MessageLargeFont
			attachments={[
				{
					text: 'File.pdf',
					description: 'This is a description :nyan_rocket:'
				}
			]}
		/>
		<MessageLargeFont
			attachments={[
				{
					text: 'File.pdf',
					description: 'This is a description :nyan_rocket:'
				}
			]}
			isHeader={false}
		/>
	</>
);

export const FileAttachmentsWithFilenames = () => (
	<>
		<Message
			msg='Check out this Python file'
			attachments={[
				{
					type: 'file',
					title: 'test.py',
					title_link: '/file-upload/abc123/test.py'
				}
			]}
		/>
		<Message
			msg='TypeScript component'
			attachments={[
				{
					type: 'file',
					title: 'Component.tsx',
					title_link: '/file-upload/def456/Component.tsx'
				}
			]}
		/>
		<Message
			msg='Configuration file'
			attachments={[
				{
					type: 'file',
					title: 'config.json',
					title_link: '/file-upload/ghi789/config.json'
				}
			]}
		/>
		<Message
			msg='File with description'
			attachments={[
				{
					type: 'file',
					title: 'main.go',
					text: 'This is the **main** entry point for the application',
					title_link: '/file-upload/jkl012/main.go'
				}
			]}
		/>
		<Message
			attachments={[
				{
					type: 'file',
					title: 'document.pdf',
					title_link: '/file-upload/mno345/document.pdf'
				},
				{
					type: 'file',
					title: 'image.png',
					title_link: '/file-upload/pqr678/image.png'
				}
			]}
			isHeader={false}
		/>
	</>
);

export const FileAttachmentsWithFilenamesLargeFont = () => (
	<>
		<MessageLargeFont
			msg='Check out this Python file'
			attachments={[
				{
					type: 'file',
					title: 'test.py',
					title_link: '/file-upload/abc123/test.py'
				}
			]}
		/>
		<MessageLargeFont
			msg='TypeScript component'
			attachments={[
				{
					type: 'file',
					title: 'Component.tsx',
					title_link: '/file-upload/def456/Component.tsx'
				}
			]}
		/>
		<MessageLargeFont
			msg='Configuration file'
			attachments={[
				{
					type: 'file',
					title: 'config.json',
					title_link: '/file-upload/ghi789/config.json'
				}
			]}
		/>
		<MessageLargeFont
			msg='File with description'
			attachments={[
				{
					type: 'file',
					title: 'main.go',
					text: 'This is the **main** entry point for the application',
					title_link: '/file-upload/jkl012/main.go'
				}
			]}
		/>
		<MessageLargeFont
			attachments={[
				{
					type: 'file',
					title: 'document.pdf',
					title_link: '/file-upload/mno345/document.pdf'
				},
				{
					type: 'file',
					title: 'image.png',
					title_link: '/file-upload/pqr678/image.png'
				}
			]}
			isHeader={false}
		/>
		<MessageLargeFont
			msg='multi file'
			attachments={[
				{
					text: 'File.pdf'
				},
				{
					text: 'File.pdf'
				}
			]}
		/>
	</>
);

export const MessageWithReply = () => (
	<>
		<Message
			msg="I'm fine!"
			attachments={[
				{
					author_name: "I'm a very long long title and I'll break",
					ts: date,
					timeFormat: 'LT',
					text: 'How are you?'
				}
			]}
		/>
		<Message
			msg="I'm fine!"
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					text: 'How are you? :nyan_rocket:'
				},
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					text: 'How are you? :nyan_rocket:',
					description: 'Reply attachment can have a description'
				}
			]}
		/>
		<Message
			msg='Looks cool!'
			attachments={[
				{
					author_name: 'rocket.cat',
					attachments: [
						{
							author_name: 'rocket.cat',
							ts: date,
							timeFormat: 'LT',
							description: 'What you think about this one?',
							image_url: 'https://octodex.github.com/images/yaktocat.png'
						}
					],
					text: ''
				}
			]}
		/>
		<Message
			msg='Yes, I am'
			attachments={[
				{
					author_name: 'rocket.cat',
					attachments: [
						{
							author_name: 'rocket.cat',
							ts: date,
							timeFormat: 'LT',
							description: 'Are you seeing this mario :marioparty: ?',
							image_url: 'https://octodex.github.com/images/yaktocat.png'
						}
					],
					text: ''
				}
			]}
		/>
	</>
);

export const MessageWithReplyAndFile = () => (
	<>
		<Message
			msg='Here is the file'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'script.sh',
					title_link: '/file-upload/xyz789/script.sh'
				}
			]}
		/>
		<Message
			msg='Got it!'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'config.yaml',
					text: 'This is a configuration file with **important** settings',
					title_link: '/file-upload/abc123/config.yaml'
				}
			]}
		/>
		<Message
			msg='Multiple files'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'index.ts',
					title_link: '/file-upload/def456/index.ts'
				},
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'styles.css',
					title_link: '/file-upload/ghi789/styles.css'
				}
			]}
		/>
	</>
);

export const MessageWithReplyLargeFont = () => (
	<>
		<MessageLargeFont
			msg="I'm fine!"
			attachments={[
				{
					author_name: "I'm a very long long title and I'll break",
					ts: date,
					timeFormat: 'LT',
					text: 'How are you?'
				}
			]}
		/>
		<MessageLargeFont
			msg="I'm fine!"
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					text: 'How are you? :nyan_rocket:'
				}
			]}
		/>
		<MessageLargeFont
			msg='Looks cool!'
			attachments={[
				{
					author_name: 'rocket.cat',
					attachments: [
						{
							author_name: 'rocket.cat',
							ts: date,
							timeFormat: 'LT',
							description: 'What you think about this one?',
							image_url: 'https://octodex.github.com/images/yaktocat.png'
						}
					],
					text: ''
				}
			]}
		/>
		<MessageLargeFont
			msg='Yes, I am'
			attachments={[
				{
					author_name: 'rocket.cat',
					attachments: [
						{
							author_name: 'rocket.cat',
							ts: date,
							timeFormat: 'LT',
							description: 'Are you seeing this mario :marioparty: ?',
							image_url: 'https://octodex.github.com/images/yaktocat.png'
						}
					],
					text: ''
				}
			]}
		/>
	</>
);

export const MessageWithNestedReplyAndFile = () => (
	<>
		<Message
			msg='Forwarded message with file inside'
			attachments={[
				{
					author_name: 'rocket.cat',
					message_link: 'https://open.rocket.chat/group/msg-id',
					ts: date,
					timeFormat: 'LT',
					text: '',
					attachments: [
						{
							author_name: 'user',
							ts: date,
							timeFormat: 'LT',
							type: 'file',
							title: 'document.pdf',
							title_link: '/file-upload/abc/document.pdf'
						}
					]
				}
			]}
		/>
		<Message
			msg='Forwarded message with nested image'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					text: '',
					attachments: [
						{
							author_name: 'user',
							ts: date,
							timeFormat: 'LT',
							description: 'Nested image from forwarded message',
							image_url: 'https://octodex.github.com/images/yaktocat.png'
						}
					]
				}
			]}
		/>
	</>
);

export const MessageWithReplyAndFileLargeFont = () => (
	<>
		<MessageLargeFont
			msg='Here is the file'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'script.sh',
					title_link: '/file-upload/xyz789/script.sh'
				}
			]}
		/>
		<MessageLargeFont
			msg='Got it!'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'config.yaml',
					text: 'This is a configuration file with **important** settings',
					title_link: '/file-upload/abc123/config.yaml'
				}
			]}
		/>
		<MessageLargeFont
			msg='Multiple files'
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'index.ts',
					title_link: '/file-upload/def456/index.ts'
				},
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					type: 'file',
					title: 'styles.css',
					title_link: '/file-upload/ghi789/styles.css'
				}
			]}
		/>
	</>
);

export const MessageWithReadReceipt = () => (
	<>
		<Message msg="I'm fine!" isReadReceiptEnabled unread />
		<Message msg="I'm fine!" isReadReceiptEnabled unread isHeader={false} />
		<Message msg="I'm fine!" isReadReceiptEnabled read />
		<Message msg="I'm fine!" isReadReceiptEnabled read isHeader={false} />
	</>
);

export const MessageWithReadReceiptLargeFont = () => (
	<>
		<MessageLargeFont msg="I'm fine!" isReadReceiptEnabled unread />
		<MessageLargeFont msg="I'm fine!" isReadReceiptEnabled unread isHeader={false} />
		<MessageLargeFont msg="I'm fine!" isReadReceiptEnabled read />
		<MessageLargeFont msg="I'm fine!" isReadReceiptEnabled read isHeader={false} />
	</>
);

export const MessageWithThread = () => (
	<>
		<Message msg='How are you?' tcount={1} tlm={date} />
		<Message msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
		<Message msg="I'm fine!" tmid='1' tmsg='Thread with emoji :) :joy:' isThreadReply />
		<Message msg="I'm fine!" tmid='1' tmsg={longText} isThreadReply />
		<Message msg={longText} tmid='1' tmsg='How are you?' isThreadReply />
		<Message msg={longText} tmid='1' tmsg={longText} isThreadReply />
		<Message
			tmid='1'
			tmsg='Thread with attachment'
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
				}
			]}
			isThreadReply
		/>
		<Message
			tmid='1'
			tmsg='Thread with image attachment'
			attachments={[
				{
					title: 'example.png',
					image_url: '/file-upload/c4wcNhrbXJLBvAJtN/example.png'
				}
			]}
			isThreadReply
		/>
		<Message
			tmid='1'
			tmsg='Thread with file attachment'
			attachments={[
				{
					title: 'presentation.pptx',
					title_link: '/file-upload/c4wcNhrbXJLBvAJtN/presentation.pptx'
				}
			]}
			isThreadReply
		/>
		<Message
			tmid='1'
			tmsg='Thread with multiple attachments'
			attachments={[
				{ title: 'first-file.pdf', title_link: '/file-upload/c4wcNhrbXJLBvAJtN/first-file.pdf' },
				{ title: 'second-file.pdf', title_link: '/file-upload/c4wcNhrbXJLBvAJtN/second-file.pdf' }
			]}
			isThreadReply
		/>
	</>
);

export const MessageWithThreadLargeFont = () => (
	<>
		<MessageLargeFont msg='How are you?' tcount={1} tlm={date} />
		<MessageLargeFont msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
		<MessageLargeFont msg="I'm fine!" tmid='1' tmsg='Thread with emoji :) :joy:' isThreadReply />
		<MessageLargeFont msg="I'm fine!" tmid='1' tmsg={longText} isThreadReply />
		<MessageLargeFont msg={longText} tmid='1' tmsg='How are you?' isThreadReply />
		<MessageLargeFont msg={longText} tmid='1' tmsg={longText} isThreadReply />
		<MessageLargeFont
			tmid='1'
			tmsg='Thread with attachment'
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description :nyan_rocket:',
					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
				}
			]}
			isThreadReply
		/>
		<MessageLargeFont
			tmid='1'
			tmsg='Thread with image attachment'
			attachments={[
				{
					title: 'example.png',
					image_url: '/file-upload/c4wcNhrbXJLBvAJtN/example.png'
				}
			]}
			isThreadReply
		/>
		<MessageLargeFont
			tmid='1'
			tmsg='Thread with file attachment'
			attachments={[
				{
					title: 'presentation.pptx',
					title_link: '/file-upload/c4wcNhrbXJLBvAJtN/presentation.pptx'
				}
			]}
			isThreadReply
		/>
		<MessageLargeFont
			tmid='1'
			tmsg='Thread with multiple attachments'
			attachments={[
				{ title: 'first-file.pdf', title_link: '/file-upload/c4wcNhrbXJLBvAJtN/first-file.pdf' },
				{ title: 'second-file.pdf', title_link: '/file-upload/c4wcNhrbXJLBvAJtN/second-file.pdf' }
			]}
			isThreadReply
		/>
	</>
);

export const SequentialThreadMessagesFollowingThreadButton = () => (
	<>
		<Message msg='How are you?' tcount={1} tlm={date} />
		<Message msg="I'm fine!" tmid='1' isThreadSequential />
		<Message msg={longText} tmid='1' isThreadSequential />
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description',
					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
				}
			]}
			tmid='1'
			isThreadSequential
		/>
	</>
);

export const SequentialThreadMessagesFollowingThreadButtonLargeFont = () => (
	<>
		<MessageLargeFont msg='How are you?' tcount={1} tlm={date} />
		<MessageLargeFont msg="I'm fine!" tmid='1' isThreadSequential />
		<MessageLargeFont msg={longText} tmid='1' isThreadSequential />
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description',
					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
				}
			]}
			tmid='1'
			isThreadSequential
		/>
	</>
);

export const SequentialThreadMessagesFollowingThreadReply = () => (
	<>
		<Message msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
		<Message msg='Cool!' tmid='1' isThreadSequential />
		<Message msg={longText} tmid='1' isThreadSequential />
		<Message
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description',
					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
				}
			]}
			tmid='1'
			isThreadSequential
		/>
	</>
);

export const SequentialThreadMessagesFollowingThreadReplyLargeFont = () => (
	<>
		<MessageLargeFont msg="I'm fine!" tmid='1' tmsg='How are you?' isThreadReply />
		<MessageLargeFont msg='Cool!' tmid='1' isThreadSequential />
		<MessageLargeFont msg={longText} tmid='1' isThreadSequential />
		<MessageLargeFont
			attachments={[
				{
					title: 'This is a title',
					description: 'This is a description',
					audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
				}
			]}
			tmid='1'
			isThreadSequential
		/>
	</>
);

export const Discussion = () => (
	<>
		<Message type='discussion-created' drid='aisduhasidhs' dcount={null} dlm={null} msg='This is a discussion' />
		<Message type='discussion-created' drid='aisduhasidhs' dcount={1} dlm={date} msg='This is a discussion' />
		<Message type='discussion-created' drid='aisduhasidhs' dcount={10} dlm={date} msg={longText} />
		<Message type='discussion-created' drid='aisduhasidhs' dcount={1000} dlm={date} msg='This is a discussion' />
	</>
);

export const DiscussionLargeFont = () => (
	<>
		<MessageLargeFont type='discussion-created' drid='aisduhasidhs' dcount={null} dlm={null} msg='This is a discussion' />
		<MessageLargeFont type='discussion-created' drid='aisduhasidhs' dcount={1} dlm={date} msg='This is a discussion' />
		<MessageLargeFont type='discussion-created' drid='aisduhasidhs' dcount={10} dlm={date} msg={longText} />
		<MessageLargeFont type='discussion-created' drid='aisduhasidhs' dcount={1000} dlm={date} msg='This is a discussion' />
	</>
);

export const URL = () => (
	<>
		<Message
			urls={[
				{
					url: 'https://rocket.chat',
					image: 'https://open.rocket.chat/assets/logo.png',
					title: 'Rocket.Chat - Free, Open Source, Enterprise Team Chat',
					description:
						'Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.'
				},
				{
					url: 'https://google.com',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
		/>
		<Message
			urls={[
				{
					url: 'https://google.com',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
			msg='Message :nyan_rocket:'
		/>
		<Message
			urls={[
				{
					url: 'https://google.com',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
			isHeader={false}
		/>
	</>
);

export const URLLargeFont = () => (
	<>
		<MessageLargeFont
			urls={[
				{
					url: 'https://rocket.chat',
					image: 'https://open.rocket.chat/assets/logo.png',
					title: 'Rocket.Chat - Free, Open Source, Enterprise Team Chat',
					description:
						'Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.'
				},
				{
					url: 'https://google.com',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
		/>
		<MessageLargeFont
			urls={[
				{
					url: 'https://google.com',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
			msg='Message :nyan_rocket:'
		/>
		<MessageLargeFont
			urls={[
				{
					url: 'https://google.com',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
			isHeader={false}
		/>
	</>
);

export const URLImagePreview = () => (
	<>
		<Message
			urls={[
				{
					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
		/>
		<Message
			urls={[
				{
					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif'
				}
			]}
		/>
	</>
);

export const URLImagePreviewLargeFont = () => (
	<>
		<MessageLargeFont
			urls={[
				{
					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif',
					title: 'Google',
					description:
						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
				}
			]}
		/>
		<MessageLargeFont
			urls={[
				{
					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif'
				}
			]}
		/>
	</>
);

const CustomFieldsBase = ({ mode }: { mode: 'normal' | 'large' }) => {
	const Component = mode === 'normal' ? Message : MessageLargeFont;
	return (
		<>
			<Component
				msg='Message'
				attachments={[
					{
						author_name: 'rocket.cat',
						ts: date,
						timeFormat: 'LT',
						text: 'Custom fields',
						fields: [
							{
								title: 'Field 1',
								value: 'Value 1',
								short: true
							},
							{
								title: 'Field 2',
								value: 'Value 2',
								short: true
							}
						]
					}
				]}
			/>
			<Component
				msg='Message'
				attachments={[
					{
						author_name: 'rocket.cat',
						ts: date,
						timeFormat: 'LT',
						text: 'Custom fields',
						fields: [
							{
								title: 'Field 1',
								value: 'Value 1'
							},
							{
								title: 'Field 2',
								value: 'Value 2'
							},
							{
								title: 'Field 3',
								value: 'Value 3'
							},
							{
								title: 'Field 4',
								value: 'Value 4'
							},
							{
								title: 'Field 5',
								value: 'Value 5'
							}
						]
					}
				]}
			/>
		</>
	);
};

export const CustomFields = () => <CustomFieldsBase mode='normal' />;

export const CustomFieldsLargeFont = () => <CustomFieldsBase mode='large' />;

export const TwoShortCustomFieldsWithMarkdown = () => (
	<Message
		msg='Message'
		attachments={[
			{
				author_name: 'rocket.cat',
				ts: date,
				timeFormat: 'LT',
				text: 'Custom fields',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: '[Value 2](https://google.com/)',
						short: true
					}
				]
			},
			{
				author_name: 'rocket.cat',
				ts: date,
				timeFormat: 'LT',
				text: 'Custom fields 2',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: '**Value 2**',
						short: true
					}
				]
			}
		]}
	/>
);

export const TwoShortCustomFieldsWithMarkdownLargeFont = () => (
	<MessageLargeFont
		msg='Message'
		attachments={[
			{
				author_name: 'rocket.cat',
				ts: date,
				timeFormat: 'LT',
				text: 'Custom fields',
				fields: [
					{ title: 'Field 1', value: 'Value 1', short: true },
					{ title: 'Field 2', value: '[Value 2](https://google.com/)', short: true }
				]
			},
			{
				author_name: 'rocket.cat',
				ts: date,
				timeFormat: 'LT',
				text: 'Custom fields 2',
				fields: [
					{ title: 'Field 1', value: 'Value 1', short: true },
					{ title: 'Field 2', value: '**Value 2**', short: true }
				]
			}
		]}
	/>
);

export const ColoredAttachments = () => (
	<Message
		attachments={[
			{
				color: 'red',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: 'Value 2',
						short: true
					}
				]
			},
			{
				color: 'green',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: 'Value 2',
						short: true
					}
				]
			},
			{
				color: 'blue',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: 'Value 2',
						short: true
					}
				]
			}
		]}
	/>
);

export const ColoredAttachmentsLargeFont = () => (
	<MessageLargeFont
		attachments={[
			{
				color: 'red',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: 'Value 2',
						short: true
					}
				]
			},
			{
				color: 'green',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: 'Value 2',
						short: true
					}
				]
			},
			{
				color: 'blue',
				fields: [
					{
						title: 'Field 1',
						value: 'Value 1',
						short: true
					},
					{
						title: 'Field 2',
						value: 'Value 2',
						short: true
					}
				]
			}
		]}
	/>
);

export const Broadcast = () => <Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />;

export const BroadcastLargeFont = () => (
	<MessageLargeFont msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />
);

export const Archived = () => <Message msg='This message is inside an archived room' archived />;

export const ArchivedLargeFont = () => <MessageLargeFont msg='This message is inside an archived room' archived />;

export const Error = () => (
	<>
		<Message hasError msg='This message has error' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
		<Message
			hasError
			msg='This message has error too'
			status={messagesStatus.ERROR}
			onErrorPress={() => alert('Error pressed')}
			isHeader={false}
		/>
	</>
);

export const ErrorLargeFont = () => (
	<>
		<MessageLargeFont
			hasError
			msg='This message has error'
			status={messagesStatus.ERROR}
			onErrorPress={() => alert('Error pressed')}
		/>
		<MessageLargeFont
			hasError
			msg='This message has error too'
			status={messagesStatus.ERROR}
			onErrorPress={() => alert('Error pressed')}
			isHeader={false}
		/>
	</>
);

export const Temp = () => <Message msg='Temp message' status={messagesStatus.TEMP} isTemp />;

export const TempLargeFont = () => <MessageLargeFont msg='Temp message' status={messagesStatus.TEMP} isTemp />;

export const Editing = () => <Message msg='Message being edited' isBeingEdited />;

export const EditingLargeFont = () => <MessageLargeFont msg='Message being edited' isBeingEdited />;

export const SystemMessages = () => (
	<>
		<Message type='rm' isInfo />
		<Message type='uj' isInfo />
		<Message
			msg='New name'
			type='message_pinned'
			isInfo
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					text: 'First message'
				}
			]}
		/>
		<Message type='ul' isInfo />
		<Message msg='rocket.cat' type='ru' isInfo />
		<Message msg='rocket.cat' type='au' isInfo />
		<Message msg='rocket.cat' type='user-muted' isInfo />
		<Message msg='rocket.cat' type='user-unmuted' isInfo />
		<Message msg='rocket.cat' role='admin' type='subscription-role-added' isInfo />
		<Message msg='rocket.cat' role='admin' type='subscription-role-removed' isInfo />
		<Message msg='New name' type='r' isInfo />
		<Message msg='new description' type='room_changed_description' isInfo />
		<Message msg='new announcement' type='room_changed_announcement' isInfo />
		<Message msg='new topic' type='room_changed_topic' isInfo />
		<Message msg='public' type='room_changed_privacy' isInfo />
		<Message type='room_e2e_disabled' isInfo />
		<Message type='room_e2e_enabled' isInfo />
		<Message msg='rocket.cat' type='removed-user-from-team' isInfo />
		<Message msg='rocket.cat' type='added-user-to-team' isInfo />
		<Message type='user-added-room-to-team' isInfo msg='channel-name' />
		<Message type='user-converted-to-team' isInfo msg='channel-name' />
		<Message type='user-converted-to-channel' isInfo msg='channel-name' />
		<Message type='user-deleted-room-from-team' isInfo msg='channel-name' />
		<Message type='user-removed-room-from-team' isInfo msg='channel-name' />
		<Message type='abac-removed-user-from-room' isInfo />
		<Message type='unsupported' isInfo />
	</>
);

export const SystemMessagesLargeFont = () => (
	<>
		<MessageLargeFont type='rm' isInfo />
		<MessageLargeFont type='uj' isInfo />
		<MessageLargeFont
			msg='New name'
			type='message_pinned'
			isInfo
			attachments={[
				{
					author_name: 'rocket.cat',
					ts: date,
					timeFormat: 'LT',
					text: 'First message'
				}
			]}
		/>
		<MessageLargeFont type='ul' isInfo />
		<MessageLargeFont msg='rocket.cat' type='ru' isInfo />
		<MessageLargeFont msg='rocket.cat' type='au' isInfo />
		<MessageLargeFont msg='rocket.cat' type='user-muted' isInfo />
		<MessageLargeFont msg='rocket.cat' type='user-unmuted' isInfo />
		<MessageLargeFont msg='rocket.cat' role='admin' type='subscription-role-added' isInfo />
		<MessageLargeFont msg='rocket.cat' role='admin' type='subscription-role-removed' isInfo />
		<MessageLargeFont msg='New name' type='r' isInfo />
		<MessageLargeFont msg='new description' type='room_changed_description' isInfo />
		<MessageLargeFont msg='new announcement' type='room_changed_announcement' isInfo />
		<MessageLargeFont msg='new topic' type='room_changed_topic' isInfo />
		<MessageLargeFont msg='public' type='room_changed_privacy' isInfo />
		<MessageLargeFont type='room_e2e_disabled' isInfo />
		<MessageLargeFont type='room_e2e_enabled' isInfo />
		<MessageLargeFont msg='rocket.cat' type='removed-user-from-team' isInfo />
		<MessageLargeFont msg='rocket.cat' type='added-user-to-team' isInfo />
		<MessageLargeFont type='user-added-room-to-team' isInfo msg='channel-name' />
		<MessageLargeFont type='user-converted-to-team' isInfo msg='channel-name' />
		<MessageLargeFont type='user-converted-to-channel' isInfo msg='channel-name' />
		<MessageLargeFont type='user-deleted-room-from-team' isInfo msg='channel-name' />
		<MessageLargeFont type='user-removed-room-from-team' isInfo msg='channel-name' />
		<MessageLargeFont type='abac-removed-user-from-room' isInfo />
		<MessageLargeFont type='unsupported' isInfo />
	</>
);

export const Ignored = () => <Message isIgnored />;

export const IgnoredLargeFont = () => <MessageLargeFont isIgnored />;

export const ShowButtonAsAttachment = () => (
	<>
		<Message
			attachments={[
				{
					text: 'Test Button',
					actions: [
						{
							type: 'button',
							text: 'Text button',
							msg: 'Response message',
							msg_in_chat_window: true
						}
					]
				}
			]}
		/>
		<Message
			attachments={[
				{
					text: ':avocado: **Message with markdown**\n\n_Some text_\n\nThis is a test',
					actions: [
						{
							type: 'button',
							text: 'Text button',
							msg: 'Response message',
							msg_in_chat_window: true
						}
					]
				}
			]}
		/>
	</>
);

export const ShowButtonAsAttachmentLargeFont = () => (
	<>
		<MessageLargeFont
			attachments={[
				{
					text: 'Test Button',
					actions: [
						{
							type: 'button',
							text: 'Text button',
							msg: 'Response message',
							msg_in_chat_window: true
						}
					]
				}
			]}
		/>
		<MessageLargeFont
			attachments={[
				{
					text: ':avocado: **Message with markdown**\n\n_Some text_\n\nThis is a test',
					actions: [
						{
							type: 'button',
							text: 'Text button',
							msg: 'Response message',
							msg_in_chat_window: true
						}
					]
				}
			]}
		/>
	</>
);

export const ThumbnailFromServer = () => (
	<Message
		msg='this is a thumbnail'
		attachments={[
			{
				text: 'Image text',
				thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
				title: 'Title',
				title_link: 'https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/2975'
			}
		]}
	/>
);

export const ThumbnailFromServerLargeFont = () => (
	<MessageLargeFont
		msg='this is a thumbnail'
		attachments={[
			{
				text: 'Image text',
				thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
				title: 'Title',
				title_link: 'https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/2975'
			}
		]}
	/>
);

export const LongNameUser = () => (
	<>
		<Message msg={'this is a normal message'} author={longNameAuthor} />
		<Message msg={'Edited message'} author={longNameAuthor} isEdited />
		<Message msg={'Translated message'} author={longNameAuthor} isTranslated />
		<Message msg={'Encrypted message'} author={longNameAuthor} type={E2E_MESSAGE_TYPE} />
		<Message msg={'Error message'} author={longNameAuthor} hasError />
		<Message msg={'Message with read receipt'} author={longNameAuthor} isReadReceiptEnabled read />
		<Message msg={'Message with read receipt'} author={longNameAuthor} isReadReceiptEnabled read type={E2E_MESSAGE_TYPE} />
		<Message
			msg={'Show all icons '}
			author={longNameAuthor}
			isEdited
			isTranslated
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>

		<Message
			msg={longText}
			author={longNameAuthor}
			isHeader={false}
			isEdited
			isTranslated
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>

		<Message
			msg='small message'
			author={longNameAuthor}
			isHeader={false}
			isEdited
			isTranslated
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
	</>
);

export const Avatar = () => (
	<>
		<Message msg={'This message has no avatar.'} author={{ username: 'no.avatar', name: 'No Avatar' }} />
		<Message msg={"This message uses the user's profile picture as the avatar."} author={author} />
		<Message msg={'This message uses a Unicode emoji as the avatar.'} author={author} emoji={':smile:'} />
		<Message msg={'This message uses a custom animated emoji as the avatar.'} author={author} emoji={':marioparty:'} />
		<Message msg={'This message uses a custom static emoji as the avatar.'} author={author} emoji={':react_rocket:'} />
	</>
);

export const LongNameUserLargeFont = () => (
	<>
		<MessageLargeFont msg={'this is a normal message'} author={longNameAuthor} />
		<MessageLargeFont msg={'Edited message'} author={longNameAuthor} isEdited />
		<MessageLargeFont msg={'Translated message'} author={longNameAuthor} isTranslated />
		<MessageLargeFont msg={'Encrypted message'} author={longNameAuthor} type={E2E_MESSAGE_TYPE} />
		<MessageLargeFont msg={'Error message'} author={longNameAuthor} hasError />
		<MessageLargeFont msg={'Message with read receipt'} author={longNameAuthor} isReadReceiptEnabled read />
		<MessageLargeFont
			msg={'Message with read receipt'}
			author={longNameAuthor}
			isReadReceiptEnabled
			read
			type={E2E_MESSAGE_TYPE}
		/>
		<MessageLargeFont
			msg={'Show all icons '}
			author={longNameAuthor}
			isEdited
			isTranslated
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>

		<MessageLargeFont
			msg={longText}
			author={longNameAuthor}
			isHeader={false}
			isEdited
			isTranslated
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>

		<MessageLargeFont
			msg='small message'
			author={longNameAuthor}
			isHeader={false}
			isEdited
			isTranslated
			type={E2E_MESSAGE_TYPE}
			hasError
			isReadReceiptEnabled
			read
		/>
	</>
);

const collapsedAttachments = {
	collapsed: true,
	title: 'Title collapsed',
	fields: [
		{
			title: 'Field 1',
			value: 'Value 1'
		},
		{
			title: 'Field 2',
			value: 'Value 2'
		}
	]
};

const collapsibleAttachmentWithText = {
	collapsed: true,
	title: 'Collapsed attachment block',
	text: 'This attachment text should NOT appear as plain text above the message or duplicate before the block.',
	description: 'Attachment description that might also leak as duplicate plain text.',
	color: '#2c3e50',
	fields: [
		{ title: 'Field 1', value: 'Value 1', short: true },
		{ title: 'Field 2', value: 'Value 2', short: true },
		{ title: 'Long field', value: 'This field value could also contribute to duplicate text when expanded.', short: false }
	]
};

export const CollapsedAttachments = () => (
	<>
		<Message msg='Message' attachments={[collapsedAttachments]} />
		{/* technically not CollapsibleQuote, but it's similar enough to write a story for */}
		<Message msg='Message' attachments={[{ ...collapsedAttachments, collapsed: false }]} />
	</>
);

export const CollapsedAttachmentsLargeFont = () => (
	<>
		<MessageLargeFont msg='Message' attachments={[collapsedAttachments]} />
		{/* technically not CollapsibleQuote, but it's similar enough to write a story for */}
		<MessageLargeFont msg='Message' attachments={[{ ...collapsedAttachments, collapsed: false }]} />
	</>
);

export const CollapsibleAttachmentWithText = () => (
	<>
		<Message msg='This is the main message body.' attachments={[collapsibleAttachmentWithText]} />
		<Message msg='This is the main message body.' attachments={[{ ...collapsibleAttachmentWithText, collapsed: false }]} />
	</>
);

export const CollapsibleAttachmentWithTextLargeFont = () => (
	<>
		<MessageLargeFont msg='This is the main message body.' attachments={[collapsibleAttachmentWithText]} />
		<MessageLargeFont
			msg='This is the main message body.'
			attachments={[{ ...collapsibleAttachmentWithText, collapsed: false }]}
		/>
	</>
);

const attachmentWithTextAndLink = [
	{
		title: 'Rocket.Chat',
		title_link: 'https://rocket.chat',
		text: 'Rocket.Chat, the best open source chat',
		image_url: 'https://rc.jena.de/images/integration-attachment-example.png',
		color: '#764FA5'
	}
];

export const AttachmentWithTextAndLink = () => <Message attachments={attachmentWithTextAndLink} />;

export const AttachmentWithTextAndLinkLargeFont = () => <MessageLargeFont attachments={attachmentWithTextAndLink} />;
const katex = {
	msg: '\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]',
	md: [
		{
			type: 'KATEX',
			value:
				' \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }'
		}
	]
};

export const Katex = () => (
	<>
		<Message {...katex} />
	</>
);
export const KatexLargeFont = () => <MessageLargeFont {...katex} />;

const katexArray = {
	msg: '\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}',
	md: [
		{
			type: 'KATEX',
			value:
				' \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{testing} & \\text{testingII} & \\text{testing III} & \\text{testing IV} & \\text{testV} & \\text{testVI} \\\\ \\hline \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} \\\\ \\hline\\text{TEST} & \\text{✅} & \\text{test} & \\text{test} & \\text{test} & \\text{✅} \\\\ \\hline \\end{array} '
		}
	]
};

export const KatexArray = () => (
	<>
		<Message {...katexArray} />
	</>
);

export const KatexArrayLargeFont = () => <MessageLargeFont {...katexArray} />;

const inlineKatex = {
	msg: '\\(xˆ2 + yˆ2 - zˆ2\\)',
	md: [
		{
			type: 'PARAGRAPH',
			value: [
				{
					type: 'INLINE_KATEX',
					value: 'xˆ2 + yˆ2 - zˆ2'
				}
			]
		}
	]
};

export const InlineKatex = () => (
	<>
		<Message {...inlineKatex} />
	</>
);
export const InlineKatexLargeFont = () => <MessageLargeFont {...inlineKatex} />;
