import React, {Component} from "react";
import {connect} from "react-redux";
import {decodeEmoji} from "./_component/EmojiIcons.js";
import {clearHtml, getMessageMetaData} from "../utils/helpers";

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

//actions
import {messageEditing} from "../actions/messageActions";
import {threadIsSendingMessage} from "../actions/threadActions";

//components
import Paper from "../../../Talk-ui-kit/src/paper";
import Container from "../../../Talk-ui-kit/src/container";
import {Text} from "../../../Talk-ui-kit/src/typography";
import {MdClose, MdEdit, MdReply} from "react-icons/md";
import {TiArrowForward} from "react-icons/ti";

//styling
import style from "../../styles/app/MainFooterInputEditing.scss";
import utilsStyle from "../../styles/utils/utils.scss";

//statics
const constants = {
  replying: "REPLYING",
  forwarding: "FORWARDING"
};

//functions


export function messageEditingCondition(messageEditing) {
  if (messageEditing) {
    if (messageEditing.message) {
      return true;
    }
  }
}

function getImage(metaData) {

  let imageLink = metaData.link;
  let width = metaData.width;
  let height = metaData.height;

  const ratio = height / width;
  const maxWidth = 30;
  if (width <= maxWidth) {
    return {imageLink};
  }
  height = Math.ceil(maxWidth * ratio);
  return `${imageLink}&width=${maxWidth}&height=${height}`;
}

export function getMessageEditingText(message) {
  const editObject = {text: null};
  if (message) {
    if (message instanceof Array) {
      editObject.text = strings.messagesCount(message.length);
    } else {
      if (message.metadata) {
        const file = getMessageMetaData(message).file;
        if (file) {
          const isVideo = file.mimeType.match(/mp4|ogg|3gp|ogv/);
          let width = file.width;
          editObject.text = file.originalName;
          editObject.isVideo = isVideo;
          if (width) {
            editObject.image = getImage(file);
          }
        } else {
          editObject.text = message.message;
        }
      } else {
        editObject.text = message.message;
      }
    }
    return editObject;
  }
}

@connect(store => {
  return {
    messageEditing: store.messageEditing
  };
})
export default class MainFooterInputEditing extends Component {

  constructor(props) {
    super(props);
    this.onCancelEditing = this.onCancelEditing.bind(this);
  }

  componentDidUpdate(prevProps) {
    const {messageEditing, setInputText, dispatch} = this.props;
    if (messageEditing) {
      if (messageEditing.type !== constants.replying) {
        if (prevProps.messageEditing !== messageEditing) {
          if (messageEditing.type !== constants.replying && messageEditing.type !== constants.forwarding) {
            if (!messageEditing.message.draftMode) {
              setInputText(decodeEmoji(messageEditing.message.message));
            }
          } else {
            dispatch(threadIsSendingMessage(true));
          }
        }
      }
    }
  }

  onCancelEditing() {
    const {messageEditing: msgEditing, dispatch} = this.props;
    if (msgEditing.type === constants.forwarding) {
      dispatch(threadIsSendingMessage(false));
    }
    dispatch(messageEditing());
  }

  render() {
    const {messageEditing} = this.props;
    const isEditing = messageEditingCondition(messageEditing);
    let editObject;
    if (isEditing) {
      editObject = getMessageEditingText(messageEditing.message);
      const text = editObject.image ? null : decodeEmoji(clearHtml(editObject.text))
      return (

        <Paper colorBackgroundLight style={{borderRadius: "20px 20px 0 0"}}>
          <Container inline className={style.MainFooterInputEditing}>
            <Container>
              {messageEditing.type === constants.forwarding ?
                <TiArrowForward style={{margin: "0 5px"}} size={style.iconSizeMd} color={style.colorAccent}/>
                :
                messageEditing.type === constants.replying ?
                  <MdReply style={{margin: "0 5px"}} size={style.iconSizeMd} color={style.colorAccent}/>
                  :
                  <MdEdit style={{margin: "0 5px"}} size={style.iconSizeMd} color={style.colorAccent}/>
              }
            </Container>

            <Container className={style.MainFooterInputEditing__Content} userSelect="none">
              {editObject.image ?
                <Container className={style.MainFooterInputEditing__ImageContainer} inline>
                  <Container className={style.MainFooterInputEditing__Image}
                             style={{backgroundImage: `url(${editObject.image})`}}/>
                </Container>
                : ""}
              <Container inline>

                {text ?
                  <Text size="sm" isHTML>{decodeEmoji(clearHtml(editObject.text))}</Text>
                  :
                  <Text bold size="xs" italic color="gray" dark>{strings.unknownMessage}</Text>
                }

              </Container>
            </Container>

            <Container>
              <MdClose size={style.iconSizeSm} color={style.colorTextLight} style={{margin: "0 4px"}}
                       className={`${utilsStyle["u-clickable"]} ${utilsStyle["u-hoverColorAccent"]}`}
                       onClick={this.onCancelEditing}/>
            </Container>
          </Container>
        </Paper>
      );
    }
    return false;
  }
}