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


class RolePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true,
    };
  }

  componentDidMount() {
    this.loadData();
  }

  loadData = () => {
    if (this.props.isCustomData) {
      this.setState({
        data: groupMembers(this.props.dataSource).role,
        loading: false,
      });
    } else {
      exceed.fetch({
        api: 'getRoles',
      }).then(({ data }) => {
        const result = data.result.result || [];
        this.setState({
          data: result.map(i => ({ ...i, memberType: 'role' })),
          loading: false,
        });
      });
    }
  }

  search = (q) => {
    if (this.props.isCustomData) {
      this.setState({
        data: filterMembers(groupMembers(this.props.dataSource).role, q),
        loading: false,
      });
    } else {
      exceed.fetch({
        api: 'searchRoles',
        data: {
          q,
        },
      }).then(({ data }) => {
        const result = data.result.result || [];
        this.setState({
          data: result.map(i => ({ ...i, memberType: 'role' })),
          loading: false,
        });
      });
    }
  }

  render() {
    const { data, loading } = this.state;
    return (
      <div className="uiless-member" ref={o => { this.panelRef = o; }}>
        <div className="uiless-member-search-wrap">
          <Search className="uiless-member-search" onChange={debounce(this.search, 200)} placeholder="搜索角色" />
        </div>
        { loading && <Loading style={{ display: 'block' }} /> }
        {
          !loading &&
          <div className="uiless-member-members">
            <MemberList data={data} {...this.props} />
          </div>
        }
      </div>
    );
  }
}

export default RolePanel;