import React from "react";
import classnames from "classnames";
import {messageDatePetrification, mobileCheck} from "../utils/helpers";

//strings

//actions

//components
import {ContextTrigger} from "../../../Talk-ui-kit/src/menu/Context";
import {PaperFooter} from "../../../Talk-ui-kit/src/paper";
import Container from "../../../Talk-ui-kit/src/container";
import {
  MdExpandLess
} from "react-icons/md";


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

//statics

//functions


export default function ({message, messageTriggerShow, isMessageByMe, mainMessagesMessageRef, children}) {
  const classNames = classnames({
    [style.MainMessagesMessageBoxFooter__OpenTriggerIconContainer]: true,
    [style["MainMessagesMessageBoxFooter__OpenTriggerIconContainer--show"]]: message.id && messageTriggerShow,
  });
  const inlineStyle = {};
  if (isMessageByMe) {
    inlineStyle.color = "#8e9881"
  }
  return (
    <PaperFooter style={inlineStyle}>
      {children}
      {messageDatePetrification(message.time)}
      <Container bottomLeft className={classNames}>
        <ContextTrigger id={"messages-context-menu"} holdToDisplay={mobileCheck() ? 1000 : -1} mouseButton={0}
                        collect={() => mainMessagesMessageRef}>

          <MdExpandLess size={style.iconSizeMd}
                        style={{marginLeft: "10px"}}
                        id={message.id}
                        className={style.MainMessagesMessageBoxFooter__TriggerIcon}/>

        </ContextTrigger>
      </Container>
    </PaperFooter>
  );
}