import React, {useState} from "react";
import {useDispatch} from "react-redux";
import {prettifyMessageDate} from "../utils/helpers";

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

//actions
import {chatAcceptCall} from "../actions/chatActions";

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

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

//statics

//functions


export default function ({isGroup, isChannel, time, lastMessageVO, draftMessage, isMessageByMe, thread}) {
  const dispatch = useDispatch();
  const {call} = thread;
  const onJoinCall = e => {
    e.stopPropagation();
    dispatch(chatAcceptCall(thread.call, false,true, thread));
  }

  return <Container topLeft className={style.AsideThreadsLastSeenMessageInfo}>
    {
      lastMessageVO && !isGroup && !isChannel && isMessageByMe &&
      <>
        {draftMessage ? "" : (
          lastMessageVO?.seen ?
            <MdDoneAll size={style.iconSizeSm} color={style.colorAccent}/> :
            <MdDone size={style.iconSizeSm} color={style.colorAccent}/>
        )}
        <Gap x={3}/>
      </>
    }
    <Text size="xs"
          color="gray">{prettifyMessageDate(time || lastMessageVO?.time)}</Text>
    {
      isGroup && call && <Button className={style.AsideThreadsLastSeenMessageInfo__JoinCallButton} size="sm" onMouseDown={e=>e.stopPropagation()} onClick={onJoinCall}>{strings.joinCall}</Button>
    }

  </Container>
}