import React, {Component, Fragment} from "react";
import "moment/locale/fa";
import {connect} from "react-redux";
import {
  mobileCheck,
  decodeEmoji,
  clearHtml,
  emailify,
  mentionify,
  urlify,
  isLTR
} from "../utils/helpers";
import copyToClipBoard from "copy-to-clipboard";

//strings
import strings from "../constants/localization";

//actions
import {
  messageCancel,
  messageEditing,
  messageSend
} from "../actions/messageActions";
import {threadCreateOnTheFly} from "../actions/threadActions";

//components
import MainMessagesMessageBox from "./MainMessagesMessageBox";
import MainMessagesMessageBoxHighLighter from "./MainMessagesMessageBoxHighLighter";
import MainMessagesMessageBoxSeen from "./MainMessagesMessageBoxSeen";
import MainMessagesMessageBoxEdit from "./MainMessagesMessageBoxEdit";
import MainMessagesMessageBoxFooter from "./MainMessagesMessageBoxFooter";
import Container from "../../../Talk-ui-kit/src/container";
import {ContextItem} from "../../../Talk-ui-kit/src/menu/Context";
import {Text} from "../../../Talk-ui-kit/src/typography";
import {MdEdit, MdContentCopy} from "react-icons/md";

//styling
import style from "../../styles/app/MainMessagesText.scss";

//statics

//functions


@connect()
export default class MainMessagesMessageText extends Component {

  constructor(props) {
    super(props);
    window.onUserNameClick = this.onUserNameClick = this.onUserNameClick.bind(this);
    this.mainMessagesMessageRef = props.setInstance(this);
  }

  onRetry(message) {
    const {dispatch} = this.props;
    dispatch(messageCancel(message.uniqueId));
    dispatch(messageSend(message.message, message.threadId));
  }

  onCancel(message) {
    this.props.dispatch(messageCancel(message.uniqueId));
  }

  onEdit(message) {
    const {onMessageControlHide, dispatch} = this.props;
    this.props.dispatch(messageEditing(message));
    onMessageControlHide();
  }

  onCopy(message) {
    copyToClipBoard(message.message)
  }

  onUserNameClick(e) {
    const id = e.replace("@", "")
    const user = {
      id,
      name: id,
      participantCount: 2,
      coreUserId: null,
      userId: id,
      title: id,
      isUserName: true
    };
    this.props.dispatch(threadCreateOnTheFly(id, user, "username"));
  }

  createContextMenuChildren() {
    const {message} = this.props;
    return (
      <Fragment>
        {
          message.editable &&
          <ContextItem onClick={this.onEdit.bind(this, message)}>
            {mobileCheck() ? <MdEdit size={style.iconSizeMd} color={style.colorAccent}/> : strings.edit}
          </ContextItem>
        }
        {
          <ContextItem onClick={this.onCopy.bind(this, message)}>
            {mobileCheck() ?
              <MdContentCopy size={style.iconSizeMd} color={style.colorAccent}/> : strings.copyText}
          </ContextItem>
        }
      </Fragment>
    )
  }

  render() {
    const {
      isMessageByMe,
      isFirstMessage,
      thread,
      messageControlShow,
      messageTriggerShow,
      message,
      highLightMessage,
      onMessageControlShow,
      onRepliedMessageClicked,
      onMessageSeenListClick,
      onMessageControlHide,
      forceSeen,
      isChannel,
      isGroup,
      supportMode,
      ref
    } = this.props;
    const text = mentionify(emailify(decodeEmoji(urlify(clearHtml(message.message))), this.onUserNameClick));
    const isLtr = isLTR(message.message);
    return (
      <Container className={style.MainMessagesText} ref={ref}>
        <MainMessagesMessageBox message={message} onRepliedMessageClicked={onRepliedMessageClicked}
                                isChannel={isChannel} isGroup={isGroup}
                                isFirstMessage={isFirstMessage} isMessageByMe={isMessageByMe}>
          <MainMessagesMessageBoxHighLighter message={message} highLightMessage={highLightMessage}/>
          <Container userSelect={mobileCheck() ? "none" : "text"} onDoubleClick={e => e.stopPropagation()}>
            {text ?
              <Text isHTML wordWrap="breakWord" whiteSpace="preWrap" color="text" dark
                    style={isLtr ? {direction: "ltr", textAlign: "left"} : null}>{text}</Text>
              :
              <Text bold size="xs" italic color="gray" dark>{strings.unknownMessage} - {message.id}</Text>
            }
          </Container>
          <MainMessagesMessageBoxFooter message={message}
                                        mainMessagesMessageRef={this.mainMessagesMessageRef}
                                        onMessageControlShow={onMessageControlShow}
                                        onMessageControlHide={onMessageControlHide}
                                        isMessageByMe={isMessageByMe}
                                        messageControlShow={messageControlShow} messageTriggerShow={messageTriggerShow}>
            <MainMessagesMessageBoxSeen isMessageByMe={isMessageByMe} message={message} thread={thread}
                                        supportMode={supportMode}
                                        forceSeen={forceSeen}
                                        onMessageSeenListClick={onMessageSeenListClick}
                                        onRetry={this.onRetry.bind(this, message)}
                                        onCancel={this.onCancel.bind(this, message)}/>
            <MainMessagesMessageBoxEdit message={message}/>
          </MainMessagesMessageBoxFooter>
        </MainMessagesMessageBox>
      </Container>
    );
  }
}