import React, {Fragment, useState} from "react";
import {useDispatch} from 'react-redux';
import {
  avatarNameGenerator,
  avatarUrlGenerator,
  isCallCenter
} from "../utils/helpers";
import date from "../utils/date";

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

//actions
import {getThreadParticipantMoreInfo} from "../actions/threadActions";

//components
import ModalThreadInfoPersonHeadMoreInfo from "./ModalThreadInfoPersonHeadMoreInfo";
import Container from "../../../Talk-ui-kit/src/container";
import List, {ListItem} from "../../../Talk-ui-kit/src/list";
import Gap from "../../../Talk-ui-kit/src/gap";
import {Heading, Text} from "../../../Talk-ui-kit/src/typography";
import Avatar, {AvatarImage, AvatarName} from "../../../Talk-ui-kit/src/avatar";
import Divider from "../../../Talk-ui-kit/src/divider";
import Loading, {LoadingBlinkDots} from "../../../Talk-ui-kit/src/loading";
import {
  MdPersonAdd,
  MdPerson,
  MdPhone,
  MdBlock,
  MdNotifications,
  MdEdit,
  MdDelete,
  MdDeleteForever,
  MdVideocam,
  MdOutlineInfo
} from "react-icons/md";

//styling
import style from "../../styles/utils/ghost.scss";
import utilsStyle from "../../styles/utils/utils.scss";

//statics

//functions


export default function f(props) {
  let {
    thread,
    notificationPending,
    GapFragment,
    AvatarModalMediaFragment,
    participantImage,
    contact,
    participant,
    contactBlocking,
    onEdit,
    $this,
    onRemove,
    onAddContact,
    onRemoveThread,
    onBlockSelect,
    onNotificationSelect,
    isOnTheFly,
    onClose,
    user
  } = props;
  const [isShowMoreInfo, setIsShowMoreInfo] = useState(false);
  const dispatch = useDispatch();
  const isMyContact = participant.isMyContact || participant.contactId;
  const iconClasses = `${utilsStyle["u-clickable"]} ${utilsStyle["u-hoverColorAccent"]}`;
  const isCallCenterUser = isCallCenter(user.id);

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

  function onShowMoreInfo(participant) {
    setIsShowMoreInfo(!isShowMoreInfo);
    if (!participant.moreInfo) {
      dispatch(getThreadParticipantMoreInfo(participant.coreUserId))
    }
    ;
  }

  return <Container>
    <Container relative>
      <Container>
        <Avatar>
          <AvatarImage src={avatarUrlGenerator(participantImage, avatarUrlGenerator.SIZES.LARGE)} size="xlg"
                       text={avatarNameGenerator(thread.title).letter}
                       textBg={avatarNameGenerator(thread.title).color}>
            <AvatarModalMediaFragment participant={participant}/>
          </AvatarImage>
          <AvatarName>
            <Container userSelect="text">
              <Heading h1>{thread.title}</Heading>
            </Container>

            <Text>{strings.lastSeen(date.prettifySince(participant ? participant.notSeenDuration : ""))}</Text>
          </AvatarName>
        </Avatar>
      </Container>

      <Container bottomLeft>
        <Gap x={5}/>
        <MdPhone size={style.iconSizeMd} color={style.colorGreenDark} className={iconClasses}
                 onClick={onCallClick.bind(null, true)}/>
        <Gap x={5}/>
        <MdVideocam size={style.iconSizeMd} color={style.colorGreenDark} className={iconClasses}
                    onClick={onCallClick}/>
        <Gap x={5}/>
      </Container>

    </Container>
    <List>
      <Fragment>
        <GapFragment/>
        {(participant.username || (contact.linkedUser && contact.linkedUser.username)) &&
        <ListItem invert>

          <Container userSelect="text">
            <MdPerson size={style.iconSizeMd} color={style.colorGray}/>
            <Gap x={20}>
              <Text inline>{participant.username || contact.linkedUser.username}</Text>
            </Gap>
          </Container>

        </ListItem>
        }
        {isMyContact ?

          <Fragment>
            {(contact.cellphoneNumber &&
              <ListItem invert>

                <Container userSelect="text">
                  <MdPhone size={style.iconSizeMd} color={style.colorGray}/>
                  <Gap x={20}>
                    <Text inline>{contact.cellphoneNumber}</Text>
                  </Gap>
                </Container>

              </ListItem>)
            }

            {
              <ListItem selection invert onSelect={onEdit.bind($this, participant, contact)}>
                <Container relative>
                  <MdEdit size={style.iconSizeMd} color={style.colorGray}/>
                  <Gap x={20}>
                    <Text>{strings.edit}</Text>
                  </Gap>
                </Container>
              </ListItem>
            }

            {
              <ListItem selection invert onSelect={onRemove.bind($this, participant)}>
                <Container relative>
                  <MdDelete size={style.iconSizeMd} color={style.colorGray}/>
                  <Gap x={20}>
                    <Text>{strings.remove}</Text>
                  </Gap>
                </Container>
              </ListItem>
            }

          </Fragment>
          :
          <ListItem selection invert onSelect={onAddContact.bind($this, participant)}>
            <Container relative>
              <MdPersonAdd size={style.iconSizeMd} color={style.colorGray}/>
              <Gap x={20}>
                <Text>{strings.addToContact}</Text>
              </Gap>
            </Container>
          </ListItem>
        }
        {!isOnTheFly &&
        <Fragment>
          {
            isMyContact &&
            <GapFragment/>
          }
          {
            <ListItem selection invert onSelect={onRemoveThread.bind($this, participant)}>
              <Container relative>
                <MdDeleteForever size={style.iconSizeMd} color={style.colorGray}/>
                <Gap x={20}>
                  <Text>{strings.removeThread}</Text>
                </Gap>
              </Container>
            </ListItem>
          }

          <ListItem selection invert onSelect={onBlockSelect.bind($this, thread.id, participant.blocked)}>
            <Container relative>
              <MdBlock size={style.iconSizeMd} color={style.colorGray}/>
              <Gap x={20}>
                <Text>{strings.block}</Text>
              </Gap>
              <Container centerLeft>
                {contactBlocking ?
                  <Container centerTextAlign>
                    <Loading hasSpace><LoadingBlinkDots size="sm"/></Loading>
                  </Container>
                  :
                  <Gap x={5}>
                    <Text size="sm"
                          color={participant.blocked ? "red" : "green"}>{participant.blocked ? strings.blocked : ""}</Text>
                  </Gap>
                }
              </Container>
            </Container>
          </ListItem>

          <ListItem selection invert onSelect={onNotificationSelect.bind(this, thread)}>

            <Container relative>
              <MdNotifications size={style.iconSizeMd} color={style.colorGray}/>
              <Gap x={20}>
                <Text>{strings.notification}</Text>
              </Gap>
              <Container centerLeft>
                {notificationPending ?
                  <Container centerTextAlign>
                    <Loading hasSpace><LoadingBlinkDots size="sm"/></Loading>
                  </Container>
                  :
                  <Gap x={5}>
                    <Text size="sm"
                          color={thread.mute ? "red" : "green"}>{thread.mute ? strings.inActive : strings.active}</Text>
                  </Gap>
                }

              </Container>
            </Container>
          </ListItem>

        </Fragment>
        }
        {
          isCallCenterUser && <ListItem selection invert onSelect={onShowMoreInfo.bind($this, participant)}>
            <Container relative>
              <MdOutlineInfo size={style.iconSizeMd} color={style.colorGray}/>
              <Gap x={20}>
                <Text>{strings.moreInfo}</Text>
              </Gap>
            </Container>
          </ListItem>
        }
      </Fragment>
      {
        (isShowMoreInfo && participant.moreInfo) &&
        <Fragment>
          <Divider thick={1} color="gray" light/>
          {participant &&
          <ModalThreadInfoPersonHeadMoreInfo moreInfoItems={participant.moreInfo}/>
          }
        </Fragment>
      }

    </List>
  </Container>
}