import React from 'react';
import { Loading, Message, Icon } from '@txdfe/at';
import MemberList from '../member-list';
import Search from './search';
import { groupMembers } from '../../utils/utils';
import exceed from '../../utils/api';
import './index.scss';

const memberTypeProps = {
  team: {
    icon: 'team-building',
    name: '部门',
  },
  group: {
    icon: 'chat-group-stroke',
    name: '群组',
  },
  role: {
    icon: 'client',
    name: '角色',
  },
};

class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: Array.isArray(props.defaultList) ? props.defaultList : [],
      searching: false,
    };
  }

  componentDidMount() {
    const { defaultList } = this.props;
    if (defaultList === 'default') {
      this.loadData();
    } else if (defaultList === 'recommend') {
      this.loadRecommendData();
    }
  }

  loadData = (q = '') => {
    const { isCustomData, dataSource, pageSize } = this.props;
    if (isCustomData) {
      this.setState({
        data: groupMembers(dataSource).user,
      });
    } else {
      this.setState({ loading: true });
      exceed.fetch({
        api: 'memberSearch',
        data: { q, pageSize },
      }).then(res => {
        const result = res.data.result.result || res.data.result;
        this.setState({
          data: result.map(r => ({ ...r, memberType: 'user' })),
          loading: false,
        });
      });
    }
  }

  loadRecommendData() {
    this.setState({ loading: true });
    exceed.fetch({
      api: 'getRecommendUsers',
    }).then(res => {
      const result = res.data.result || [];
      this.setState({
        data: result.map(r => ({ name: r.name, _userId: r._id, memberType: 'user', userInfo: { ...r } })),
        loading: false,
      });
    });
  }

  setSearching = (searching) => {
    this.setState({ searching });
  }

  render() {
    const { setIndexState, extraMemberTypes, messageProps, defaultListName, autoFocus, useGroupFeatures } = this.props;
    const { loading, data = [], searching } = this.state;
    // 开启 useGroupFeatures 且 extraMemberTypes 包含 group 才可以显示 group 功能
    const currentMemberTypes = extraMemberTypes.filter(type => type !== 'group' || useGroupFeatures);
    return (
      <div className="uiless-member" ref={o => { this.panelRef = o; }}>
        {
          messageProps && <Message {...messageProps} />
        }
        <Search {...this.props} autoFocus={autoFocus} setSearching={this.setSearching} />
        {/* { extraMemberTypes.length > 0 && !searching &&
          <div className="uiless-member-addType">
            { extraMemberTypes.map(type => (
              <div className="uiless-member-addType-item" key={type} onClick={() => setIndexState('currentStep', type)}>从{memberTypeName[type]}添加成员 <Icon type="chevron-right-s" /></div>
            ))}
          </div>
        } */}
        { extraMemberTypes.length > 0 && !searching &&
          <div className="uiless-member-type-list">
            {
              currentMemberTypes.map(type => <MemberTypeItem key={type} onClick={() => setIndexState('currentStep', type)} {...memberTypeProps[type]} />)
            }
          </div>
        }
        {
          !searching &&
          <div className="uiless-member-members">
            { loading && <Loading style={{ display: 'block' }} />}
            { !loading && <MemberList {...this.props} data={data} title={defaultListName} />}
          </div>
        }
      </div>
    );
  }
}

const MemberTypeItem = ({ icon, name, onClick }) => {
  return (
    <div className="uiless-member-type-item" onClick={onClick}>
      <Icon className="uiless-member-type-item-icon" type={icon} />
      <div className="uiless-member-type-item-text">{ name }</div>
      <Icon className="uiless-member-type-item-arrow" type="chevron-right-s" />
    </div>
  );
};

export default Panel;