import React, {Fragment, useState} from "react";
import {
  avatarNameGenerator,
  avatarUrlGenerator,
  getMessageMetaData,
  isMessageByMe
} from "../utils/helpers";

//strings
import {SHOW_UNREAD_COUNT} from "../constants/events";

//actions

//components
import AsideThreadsLastSeenMessage from "./AsideThreadsLastSeenMessage";
import Avatar, {AvatarImage, AvatarName, AvatarText} from "../../../Talk-ui-kit/src/avatar";
import {ListItem} from "../../../Talk-ui-kit/src/list";
import Shape, {ShapeCircle} from "../../../Talk-ui-kit/src/shape";
import Container from "../../../Talk-ui-kit/src/container";
import Gap from "../../../Talk-ui-kit/src/gap";
import {ContextTrigger} from "../../../Talk-ui-kit/src/menu/Context";
import {
  MdGroup,
  MdRecordVoiceOver,
  MdNotificationsOff,
  MdCheck
} from "react-icons/md";
import {
  AiFillPushpin
} from "react-icons/ai";

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

//statics

//functions


function AsideThreadsThread({
                              isMenuShow,
                              activeThread,
                              user,
                              thread,
                              onThreadClick,
                              $this
                            }) {
  const {MEDIUM} = avatarUrlGenerator.SIZES;
  let [setAvatar] = useState(null);
  let [showUnreadCount, setShowUnreadCount] = useState(true);
  window.addEventListener(SHOW_UNREAD_COUNT, e => {
    if (e.detail.id === thread.id && showUnreadCount !== e.detail.show) {
      return setShowUnreadCount(e.detail.show);
    }
  });
  let touchPosition, showMenuTimeOutId, trigger;
  const onThreadTouchStart = (thread, e) => {
    e.stopPropagation();
    const nowTouchPosition = touchPosition;
    clearTimeout(showMenuTimeOutId);
    showMenuTimeOutId = setTimeout(() => {
      clearTimeout(showMenuTimeOutId);
      showMenuTimeOutId = null;
      if (nowTouchPosition === touchPosition) {
        trigger.handleContextClick(e);
      }
    }, 700);
  };

  const onThreadTouchEnd = (thread, e) => {
    if (showMenuTimeOutId) {
      clearTimeout(showMenuTimeOutId);
    } else {
      e.preventDefault();
    }
  };

  const onThreadTouchMove = (thread, e) => {
    touchPosition = `${e.touches[0].pageX}${e.touches[0].pageY}`;
  };
  const isUnreadCountExceeded = thread.unreadCount > 999;
  const showUnreadCountCondition = !isMessageByMe(thread?.lastMessageVO) && thread.unreadCount && (showUnreadCount || activeThread !== thread.id || !document.hasFocus());
  return <>
    <ContextTrigger id="aside-threads-context-menu" holdToDisplay={-1}
                    collect={() => thread}
                    contextTriggerRef={e => trigger = e}>
      <Container relative userSelect="none">
        {thread.pin && <Container className={style.AsideThreadsThread__PinOverlay}/>}
        <ListItem key={thread.id} onSelect={onThreadClick.bind(null, thread)} selection
                  active={activeThread === thread.id}>

          <Container relative
                     onTouchStart={onThreadTouchStart.bind(null, thread)}
                     onTouchMove={onThreadTouchMove.bind(null, thread)}
                     onTouchEnd={onThreadTouchEnd.bind(null, thread)}>
            <Avatar className={style.AsideThreadsThread__AvatarContainer}>
              <AvatarImage
                src={avatarUrlGenerator.apply($this, [thread.image, MEDIUM, getMessageMetaData(thread), setAvatar])}
                customSize="55px"
                text={avatarNameGenerator(thread.title).letter}
                textBg={avatarNameGenerator(thread.title).color}/>
              <Container className={style.AsideThreadsThread__ThreadCheck} bottomRight
                         style={{zIndex: 1, opacity: +isMenuShow === thread.id ? 1 : 0}}>
                <Shape color="accent">
                  <ShapeCircle>
                    <MdCheck size={style.iconSizeSm} color={style.colorWhite}
                             style={{marginTop: "3px"}}/>
                  </ShapeCircle>
                </Shape>
              </Container>
              <AvatarName invert>
                {thread.group &&
                <Container inline>
                  {thread.type === 8 ?
                    <MdRecordVoiceOver size={style.iconSizeSm}
                                       color={style.colorGray}/>
                    :
                    <MdGroup size={style.iconSizeSm} color={style.colorGray}/>
                  }
                  <Gap x={2}/>
                </Container>
                }
                {thread.title}
                <AvatarText>
                  <AsideThreadsLastSeenMessage thread={thread} user={user}/>
                </AvatarText>
              </AvatarName>
            </Avatar>
            {thread.unreadCount || thread.pin || thread.mute ?
              <Container absolute centerLeft>
                <Gap y={10} block/>
                {thread.mentioned ?
                  <Fragment>
                    <Shape color="accent">
                      <ShapeCircle>@</ShapeCircle>
                    </Shape>
                    <Gap x={1}/>
                  </Fragment> :
                  thread.mute ?
                    <MdNotificationsOff size={style.iconSizeSm}
                                        color={style.colorAccent}
                                        style={{verticalAlign: "middle"}}/> : ""
                }
                {showUnreadCountCondition ?
                  <Shape color="accent">
                    <ShapeCircle style={isUnreadCountExceeded ? {fontSize: "9px"} : null}>
                      {isUnreadCountExceeded ? "999+" : thread.unreadCount}
                    </ShapeCircle>
                  </Shape> :
                  thread.pin ?
                    <AiFillPushpin size={style.iconSizeSm}
                                   color={style.colorAccent}
                                   style={{
                                     marginRight: "3px",
                                     verticalAlign: "middle"
                                   }}/> : ""
                }
              </Container> : ""}
          </Container>
        </ListItem>
      </Container>
    </ContextTrigger>
  </>
}

export default React.memo(AsideThreadsThread/*, (props, nextProps) => {
    const {activeThread, isMenuShow, thread} = props;
    const {activeThread: nextActiveThread, thread: nextThread, isMenuShow: nextIsMenuShow} = nextProps;
    if (thread.time === nextThread.time) {
      if (thread.mute === nextThread.mute) {
        if (thread.unreadCount === nextThread.unreadCount) {
          if (thread.image === nextThread.image) {
            if (thread.isTyping === nextThread.isTyping) {
              if (thread.title === nextThread.title) {
                if (thread.lastMessageVO.id === nextThread.lastMessageVO.id) {
                  if (thread.lastMessageVO.seen === nextThread.lastMessageVO.seen) {
                    if (thread.lastMessageVO.message === nextThread.lastMessageVO.message) {
                      if (isMenuShow === nextIsMenuShow) {
                        if (activeThread === nextActiveThread) {
                          return true;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }*/
);