import React from "react";

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

//actions

//components
import Container from "../../../Talk-ui-kit/src/container";
import {Text} from "../../../Talk-ui-kit/src/typography";
import Gap from "../../../Talk-ui-kit/src/gap";
import {
  MdDoneAll,
  MdDone,
  MdErrorOutline,
  MdSchedule
} from "react-icons/md";

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

//statics

//functions


export default function ({
                           isMessageByMe,
                           message,
                           thread,
                           onMessageSeenListClick,
                           onRetry,
                           onCancel,
                           forceSeen,
                           supportMode
                         }) {
  if (!isMessageByMe) {
    return null;
  }
  if (message.hasError) {
    return (
      <Container inline>
        <MdErrorOutline size={style.iconSizeXs} style={{margin: "0 5px"}}/>
        <Gap x={2}>
          <Container onClick={onRetry} inline>
            <Text size="xs" color="accent" linkStyle>{strings.tryAgain}</Text>
          </Container>
          <Gap x={5}/>
          <Container onClick={onCancel} inline>
            <Text size="xs" color="accent" linkStyle>{strings.cancel}</Text>
          </Container>
        </Gap>
        <Gap x={3}/>
      </Container>
    )
  }
  const isGroup = thread.group;
  const messageStatusIconSpecs = {
    color: style.colorGreenTick,
    size: 18,
    style: {margin: "0 5px"}
  };
  if (!message.id) {
    return <MdSchedule size={messageStatusIconSpecs.size} style={messageStatusIconSpecs.style}
                       color={messageStatusIconSpecs.color}/>
  }
  if (!isGroup || supportMode) {
    if (message.seen || forceSeen) {
      return <MdDoneAll size={messageStatusIconSpecs.size} style={messageStatusIconSpecs.style}
                        color={messageStatusIconSpecs.color}/>
    }
  }
  return <MdDone className={isGroup && !supportMode ? style.MainMessagesMessageBoxSeen__SentIcon : ""}
                 size={messageStatusIconSpecs.size}
                 color={messageStatusIconSpecs.color}
                 style={{margin: "0 5px", cursor: isGroup ? "pointer" : "default"}}
                 onClick={isGroup && !supportMode ? onMessageSeenListClick : null}/>
}