import React, {Component} from "react";
import {connect} from "react-redux";
import {getImage, getName} from "./_component/contactList";

import {
  avatarNameGenerator,
  avatarUrlGenerator,
  filterTalkingCallParticipant,
  getMessageMetaData,
  sortCallParticipantsBy
} from "../utils/helpers";

//actions

//components
import Gap from "../../../Talk-ui-kit/src/gap";
import Container from "../../../Talk-ui-kit/src/container";
import Avatar, {AvatarImage, AvatarName} from "../../../Talk-ui-kit/src/avatar";
import {Text} from "../../../Talk-ui-kit/src/typography";
import {
  MdMicOff,
  MdPhoneInTalk
} from "react-icons/md";

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

//statics

//functions

@connect(store => {
  return {
    chatCallParticipantList: sortCallParticipantsBy(store.chatCallParticipantList.participants, "id")
  };
})
export default class CallBoxCompactedGroup extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const {chatCallBoxShowing, chatCallParticipantList} = this.props;
    const {thread} = chatCallBoxShowing;
    return <Container className={style.CallBoxCompactedGroup}>
      <Avatar className={style.CallBoxCompactedGroup__GroupAvatar}>
        <MdPhoneInTalk color={style.colorGreenTick} size={style.iconSizeMd}
                       style={{marginLeft: "5px", minWidth: style.iconSizeMd}}/>
        <AvatarImage
          src={avatarUrlGenerator.apply(this, [thread.image, avatarUrlGenerator.SIZES.SMALL, getMessageMetaData(thread)])}
          text={avatarNameGenerator(thread.title).letter}
          textBg={avatarNameGenerator(thread.title).color}/>
        <Gap y={5}/>
        <AvatarName size="sm">
          <Text bold style={{overflow: "hidden", textOverflow: "ellipsis"}}>
            {thread.title}
          </Text>
        </AvatarName>
      </Avatar>
      {filterTalkingCallParticipant(chatCallParticipantList).map(participant =>
        <Container key={participant.id} className={style.CallBoxCompactedGroup__Participant}
                   title={getName(participant)}>
          {participant?.mute &&
          <Container className={style.CallBoxCompactedGroup__MicOffContainer}>
            <MdMicOff size={style.iconSizeXs}
                      color={style.colorGrayDark}
                      style={{margin: "3px 4px"}}/>
          </Container>
          }
          <Avatar inline={false}>
            <AvatarImage src={avatarUrlGenerator(getImage(participant), avatarUrlGenerator.SIZES.XLARGE)}
                         text={avatarNameGenerator(getName(participant)).letter}
                         textBg={avatarNameGenerator(getName(participant)).color}/>
          </Avatar>
        </Container>
      )}

    </Container>
  }
}