import React from "react";
import {analyzeCallStatus, isVideoCall} from "../utils/helpers";

//strings
import {CALL_FROM_ANYWHERE} from "../constants/callModes";

//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 Divider from "../../../Talk-ui-kit/src/divider";
import {
  MdPhone,
  MdVideocam,
  MdCallMade,
  MdCallReceived
} from "react-icons/md";

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

//statics

//functions


export default function ({onClose, message, user, thread}) {
  const AnalyzeResult = analyzeCallStatus(message, user, thread);
  const {callHistory} = message;

  function onCallClick(isVoice) {
    const event = new CustomEvent(CALL_FROM_ANYWHERE, {detail: {isVoice: isVoice === true}});
    window.dispatchEvent(event);
    onClose();
  }

  return (
    <Container>
      <Gap y={15} x={2} block>
        <Container display="flex" userSelect="none">
          <Container flex="1 1 0" display="flex" alignItems="center">
            {callHistory?.creatorId === user.id ?
              <MdCallMade size={style.iconSizeSm}
                          color={callHistory?.endTime && callHistory?.status === 7 ? style.colorGreen : style.colorRed}/>
              :
              <MdCallReceived size={style.iconSizeSm}
                              color={callHistory?.endTime && callHistory?.status === 7 ? style.colorGreen : style.colorRed}/>
            }
            <Gap x={2}/>
            <Text size="sm" inline dark>
              {AnalyzeResult.Text()}
            </Text>
          </Container>

          <Container cursor="pointer">
            {
              isVideoCall(callHistory) ?
                <MdVideocam size={style.iconSizeSm}
                            color={style.colorGreenDark}
                            onClick={onCallClick}/>
                :
                <MdPhone size={style.iconSizeSm}
                         color={style.colorGreenDark}
                         onClick={onCallClick.bind(null, true)}
                />

            }
          </Container>
        </Container>

      </Gap>
      <Divider thick={.5} color="gray" light/>
    </Container>

  )
}