'use strict';
import '../stylesheets/message.scss';

import * as React from 'react';
// import * as Textarea from 'react-textarea-autosize';
import classNames from 'classnames';

import Attachment from './MessageAttachments/Attachment';
import Reactions from './MessageAttachments/Reactions';

import SlackFormat from '../utils/slack-formatter';
import emoji from '../utils/emoji';

export interface MessageProps {
	message: any;
	messageId: string;
	messageIdx?: number;
	ephemeral?: boolean;
}

class Message extends React.Component {
	_message?: any;
	public state = {
		fallback: false,
		showSwitcher: false
	};
	public props: MessageProps;
	public static defaultProps = {
		message: {},
		messageId: '',
		messageIdx: 0,
		ephemeral: false
	};
	constructor(props) {
		super(props);

		this.handleTriggers = this.handleTriggers.bind(this);
		this.openDialogModal = this.openDialogModal.bind(this);
	}

	render() {
		const { message, messageId, messageIdx = 0, ephemeral } = this.props;

		const text = message.slack.text && (
			<div
				className={classNames('message__text', {
					'message__text--ephemeral': message.slack.ephemeral
				})}
				dangerouslySetInnerHTML={{
					__html: emoji.unicodeToImage(emoji.toUnicode(message.slack.text))
				}}
			/>
		);
		const isEphemeral =
			(message.slack.ephemeral && !message.editing) ||
			(message.editing && ephemeral) ||
			(message.creating && ephemeral);

		const avatar = (
			<span
				className="message__avatar"
				style={{
					backgroundImage: `url("/static/illustrations/bot-avatar.svg")`
				}}
			>
				{''}
			</span>
		);

		return (
			<div
				className={classNames('message', {
					'message--open': true,
					'message--deleting': message.deletionInProgress
				})}
				ref={(el) => {
					this._message = el;
				}}
			>
				{avatar}

				<div className="message__content">
					{text}
					{!this.state.fallback &&
						message.slack.attachments &&
						!!message.slack.attachments.length && (
							<div className="message__attachment-group">
								{message.slack.attachments &&
									message.slack.attachments.map((attachment, idx) => {
										const blacklist = [
											'attachment_type',
											'fallback',
											'callback_id',
											'color',
											'id',
											'mrkdwn_in',
											'storyId',
											'pretext'
										];
										const attachmentCopy = Object.assign({}, attachment);
										// const showAttachment =
										//   Object.keys(omitEmpty(attachmentCopy)).filter(k => blacklist.indexOf(k) === -1).length > 0;

										return (
											<Attachment
												key={idx}
												messageIdx={messageIdx}
												attachmentId={idx}
												ephemeral={isEphemeral}
												attachment={attachment}
												messageId={messageId}
												parser={(text) => emoji.unicodeToImage(SlackFormat(emoji.toUnicode(text), true))}
												showAttachment={true}
											/>
										);
									})}
							</div>
						)}
					{message.slack.reactions &&
						message.slack.reactions.length > 0 && <Reactions reactions={message.slack.reactions} />}
				</div>
			</div>
		);
	}

	handleTriggers(triggers, e) {
		// const { handleTriggers, messageId } = this.props;
		// handleTriggers(messageId, triggers, e);
	}

	openDialogModal() {
		// this.props.openDialogModal(this.props.message);
	}
}

export default Message;
