import React from 'react';
import { Icon,Tag } from '@txdfe/at';
import TextAvatar from '@txdfe/at-text-avatar';
import './index.scss';

const { Colorable: ColorTag } = Tag;

class MemberInfo extends React.Component {
  render() {
    const { member = {}, userTagRender } = this.props;
    const { memberType = 'user', name = '', tag } = member;
    const userTag = tag || (userTagRender && userTagRender(member));
    const userInfo = member.userInfo || {};
    switch (memberType) {
      case 'user': return (
        <div className="uiless-member-user-item">
          <TextAvatar size="medium" image={userInfo.avatarUrl} text={name || ''} />
          <div className="uiless-member-user-item-info">
            <span className="uiless-member-user-item-name">{name || ''}</span>
            {userInfo.email && <span className="uiless-member-user-item-email">{userInfo.email}</span>}
          </div>
          {userTag && (
            <div className="uiless-member-user-item-tag">
              <ColorTag {...userTag} />
            </div>
          )}
        </div>
      );
      case 'team': return (
        <div className="uiless-member-team-item">
          <Icon type="users-fill" className="uiless-member-team-item-icon" />
          <div className="uiless-member-team-item-info">
            {name}
            <span> · {member.memberCount}</span>
          </div>
        </div>
      );
      case 'role': return (
        <div className="uiless-member-role-item">
          {name}
        </div>
      );
      case 'group': return (
        <div className="uiless-member-user-item">
          <TextAvatar size="medium" image={member.logo} text={name || ''} />
          <div className="uiless-member-user-item-info">
            <span className="uiless-member-user-item-name">{name || ''}</span>
            {member.email && <span className="uiless-member-user-item-email">{member.email}</span>}
          </div>
        </div>
      );
      default: break;
    }
  }
}

export default MemberInfo;