import React from 'react';
import { Checkbox, Dropdown, Menu, Button, Icon } from '@txdfe/at';
import MemberInfo from '../member-info';
import { isIncludeMember } from '../../utils/utils';
import './index.scss';

const { Item } = Menu;

class MemberItem extends React.Component {
  onSelectItem = (key) => {
    const { customRoles, member } = this.props;
    this.currentRole = customRoles[key];
    //                  当前操作成员，操作成员角色， 增/删
    this.props.onChange(member, this.currentRole, true);
  }

  addUser = () => {
    this.props.onChange(this.props.member);
  }

  onCheck = (value) => {
    const { member } = this.props;
    this.props.onChange(member, this.currentRole, value);
  }

  goTeamDetail = () => {
    const { member, teamArrowClick } = this.props;
    teamArrowClick(member._id);
  }

  render() {
    const { multiple, member, currentValue = [], customRoles, mode, defaultValue = [], hasTeamArrow } = this.props;
    const disabled = mode === 'add' ? isIncludeMember(defaultValue, member) : false;
    const checked = disabled || isIncludeMember(currentValue, member);
    return (
      <div className={`uiless-member-item ${checked ? 'uiless-member-item-checked' : ''} ${member.memberType === 'user' ? 'uiless-member-item-user' : ''}`}>
        {
          multiple &&
          <div className="uiless-member-item-checkbox">
            <Checkbox onChange={this.onCheck} checked={checked} disabled={disabled}>
              <MemberInfo member={member} />
            </Checkbox>
            { member.memberType === 'team' && hasTeamArrow &&
              <Icon
                type="chevron-right-s"
                className="uiless-member-item-arrow"
                onClick={this.goTeamDetail}
              />
            }
          </div>
        }
        {
          !multiple &&
          <div className="uiless-member-immediateSubmit">
            <MemberInfo member={member} />
            { member.memberType === 'team' && hasTeamArrow &&
              <Icon
                type="chevron-right-s"
                className="uiless-member-item-arrow"
                onClick={this.goTeamDetail}
              />
            }
            {
              checked && !hasTeamArrow &&
              <span className="uiless-member-added">已加入</span>
            }
            {
              !checked && !hasTeamArrow && customRoles.length === 0 &&
              <Button text type="primary" onClick={this.addUser}>添加</Button>
            }
            {
              !checked && !hasTeamArrow && customRoles.length > 0 &&
              <Dropdown trigger={<Button text type="primary">添加</Button>} triggerType={['click']}>
                <Menu onItemClick={this.onSelectItem}>
                  {
                    customRoles.map((item, index) => <Item key={index}>{item.label}</Item>)
                  }
                </Menu>
              </Dropdown>
            }
          </div>
        }
      </div>
    );
  }
}

export default MemberItem;