import React from 'react';
import MemberList from '../member-list';
import { groupMembers } from '../../utils/utils';
import './index.scss';


class ValuePanel extends React.Component {
  render() {
    const { extraMemberTypes, style } = this.props;
    const { user, team, role, group } = groupMembers(this.props.data);
    return (
      <div className="uiless-member" style={style}>
        <div className="uiless-member-members">
          { team.length > 0 && extraMemberTypes.includes('team') &&
            <MemberList {...this.props} data={team} title="部门" style={{ marginBottom: 16 }} /> }
          { role.length > 0 && extraMemberTypes.includes('role') &&
            <MemberList {...this.props} data={role} title="角色" style={{ marginBottom: 16 }} /> }
          { group.length > 0 && extraMemberTypes.includes('group') &&
            <MemberList {...this.props} data={group} title="群组" style={{ marginBottom: 16 }} /> }
          { user.length > 0 &&
            <MemberList {...this.props} data={user} title="成员" style={{ marginBottom: 16 }} /> }
        </div>
      </div>
    );
  }
}

export default ValuePanel;