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

class MiniMemberItem extends React.Component {
  onCheck = (value = true) => {
    const { member } = this.props;
    this.props.onChange(member, value);
  }

  render() {
    const { member, value, multiple, mode, defaultValue, userTagRender } = this.props;
    const disabled = mode === 'add' ? isIncludeMember(defaultValue, member) : false;
    const checked = disabled || isIncludeMember(value, member);
    return (
      <div className={`uiless-member-mini-item ${checked ? 'uiless-member-item-mini-checked' : ''}`}>
        {
          multiple &&
          <Checkbox onChange={this.onCheck} checked={checked} disabled={disabled}>
            <MemberInfo member={member} userTagRender={userTagRender} />
          </Checkbox>
        }
        {
          !multiple &&
          <div className="uiless-member-single-mini" onClick={this.onCheck}>
            {checked && <Icon type="tick" size="medium" />}
            <MemberInfo member={member} userTagRender={userTagRender} />
          </div>
        }
      </div>
    );
  }
}

export default MiniMemberItem;