import React, {Fragment} from "react";
import {
  decodeEmoji,
  clearHtml,
  isMessageIsFile,
  isSystemMessage,
  analyzeCallStatus
} from "../utils/helpers";
import {sanitizeRule} from "./AsideThreads";

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

//actions

//components
import Typing from "./_component/Typing";
import Container from "../../../Talk-ui-kit/src/container";
import {Text} from "../../../Talk-ui-kit/src/typography";

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

//statics

//functions


export default function (props) {
  const {
    isGroup,
    isChannel,
    lastMessageVO,
    lastMessage,
    draftMessage,
    inviter,
    isTyping,
    isMessageByMe,
    thread
  } = props;
  const isFileReal = isMessageIsFile(lastMessageVO);
  const hasLastMessage = lastMessage || lastMessageVO;
  const isSystemMessageResult = lastMessageVO && isSystemMessage(lastMessageVO);
  const AnalyzeResult = isSystemMessageResult && analyzeCallStatus(lastMessageVO, isMessageByMe, thread);
  const isTypingReal = isTyping && isTyping.isTyping;
  const isTypingUserName = isTyping && isTyping.user.user;
  const AnalyzeCallFragment = () => AnalyzeResult &&
    (<Container userSelect="none" className={style.MainMessagesMessageSystem__CallStatus}>
      <AnalyzeResult.Icon/>
      <Text size="sm" inline color="gray" dark>
        {AnalyzeResult.Text()}
      </Text>
    </Container>)

  return (
    <Container> {
      isTypingReal ?
        <Typing isGroup={isGroup || isChannel} typing={isTyping}
                textProps={{size: "sm", color: "yellow", dark: true}}/>
        :
        draftMessage ?
          <Fragment>
            <Text size="sm" inline color="red" light>{strings.draft}:</Text>
            <Text size="sm"
                  inline
                  color="gray"
                  dark
                  isHTML>{clearHtml(draftMessage, true)}</Text></Fragment>
          :
          (
            isGroup && !isChannel ?
              AnalyzeResult ?
                <AnalyzeCallFragment/>
                :
                hasLastMessage ?
                  <Container display="inline-flex">

                    <Container>
                      <Text size="sm" inline
                            color="accent">{isTypingReal ? isTypingUserName : draftMessage ? "Draft:" : lastMessageVO?.participant && (lastMessageVO?.participant?.contactName || lastMessageVO?.participant?.name)}:</Text>
                    </Container>

                    <Container>
                      {isFileReal ?
                        <Text size="sm" inline color="gray" dark>{strings.sentAFile}</Text>
                        :
                        <Text isHTML size="sm" inline color="gray"
                              sanitizeRule={sanitizeRule}
                              dark>{decodeEmoji(lastMessage, 30)}</Text>
                      }
                    </Container>

                  </Container>
                  :
                  <Text size="sm" inline
                        color="accent">{decodeEmoji(strings.createdAThread(inviter && (inviter.contactName || inviter.name), isGroup, isChannel), 30)}</Text>
              :
              hasLastMessage ? isFileReal ?
                  <Text size="sm" inline color="gray" dark>{strings.sentAFile}</Text>
                  :
                  <Fragment>
                    {AnalyzeResult ?
                      <AnalyzeCallFragment/>
                      :
                      <Text isHTML size="sm" inline color="gray"
                            sanitizeRule={sanitizeRule}
                            dark>{decodeEmoji(lastMessage, 30)}</Text>
                    }
                  </Fragment>

                :
                <Text size="sm" inline
                      color="accent">{decodeEmoji(strings.createdAThread(inviter && (inviter.contactName || inviter.name), isGroup, isChannel), 30)}</Text>
          )
    }
    </Container>
  )
}