import React, {Component} from "react";
import {connect} from "react-redux";
import classnames from "classnames";
import {
  avatarNameGenerator,
  avatarUrlGenerator,
  filterTalkingCallParticipant,
  sortCallParticipantsBy
} from "../utils/helpers";

//strings
import {BREAK_PARTICIPANT_AVATAR_LIMIT, CHAT_CALL_STATUS_STARTED} from "../constants/callModes";

//actions
import {chatCallGroupSettingsShowing} from "../actions/chatActions";

//components
import CallBoxEqualizer from "./CallBoxEqualizer";
import CallBoxReconnecting from "./CallBoxReconnecting";
import CallBoxSceneGroupParticipantsControl from "./CallBoxSceneGroupParticipantsControl";
import {getImage, getName} from "./_component/contactList";
import Container from "../../../Talk-ui-kit/src/container";
import {
  MdMicOff,
} from "react-icons/md";
import Avatar, {AvatarImage} from "../../../Talk-ui-kit/src/avatar";

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

//statics

//functions


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

  constructor(props) {
    super(props);
    this.setDetailsShowing = this.setDetailsShowing.bind(this);
    this.state = {
      detailsListShowing: false
    }
  }

  setDetailsShowing() {
    this.props.dispatch(chatCallGroupSettingsShowing(true));
  }

  render() {
    const {chatCallParticipantList, chatCallBoxShowing, user, chatCallGroupSettingsShowing, chatCallStatus} = this.props;
    const {detailsListShowing} = this.state;
    const callStarted = chatCallStatus.status === CHAT_CALL_STATUS_STARTED;
    const CallBoxSceneGroupParticipantsClassNames = classnames({
      [style.CallBoxSceneGroupParticipants]: true,
      [style["CallBoxSceneGroupParticipants--details"]]: detailsListShowing
    });
    if (chatCallGroupSettingsShowing) {
      return <CallBoxSceneGroupParticipantsControl chatCallParticipantList={chatCallParticipantList}
                                                   chatCallBoxShowing={chatCallBoxShowing}
                                                   user={user}/>
    }
    let filteredParticipantList = callStarted ? filterTalkingCallParticipant(chatCallParticipantList) : chatCallParticipantList;
    filteredParticipantList = filteredParticipantList.length > BREAK_PARTICIPANT_AVATAR_LIMIT ? filteredParticipantList.slice(0, 4) : filteredParticipantList;
    if (chatCallParticipantList.length > BREAK_PARTICIPANT_AVATAR_LIMIT) {
      filteredParticipantList.push({contactName: `${chatCallParticipantList.length - filteredParticipantList.length}+`, callStatus: 6, isSymbolic: true})
    }
    return <Container className={CallBoxSceneGroupParticipantsClassNames}
                      onClick={() => this.setDetailsShowing()}>
      {filteredParticipantList.map(participant =>
        <Container key={participant.id} className={style.CallBoxSceneGroupParticipants__Participant} title={getName(participant)}>
          {participant?.mute &&
          <Container className={style.CallBoxSceneGroupParticipants__MicOffContainer} topLeft>
            <MdMicOff size={style.iconSizeXs}
                      color={style.colorGrayDark}
                      style={{margin: "3px 4px"}}/>
          </Container>
          }
          <Avatar inline={false}>
            <CallBoxEqualizer participant={participant}/>
            <CallBoxReconnecting participant={participant}/>
            <AvatarImage src={avatarUrlGenerator(getImage(participant), avatarUrlGenerator.SIZES.XLARGE)}
                         text={participant.isSymbolic ? participant.contactName : avatarNameGenerator(getName(participant)).letter}
                         textBg={avatarNameGenerator(getName(participant)).color}/>
          </Avatar>
        </Container>
      )}

    </Container>
  }
}