import React from 'react';
import { Search, Loading } from '@txdfe/at';
import lodashGet from 'lodash/get';
import { debounce } from 'debounce';
import exceed from '../../utils/api';
import { filterMembers } from '../../utils/utils';
import Empty from '../empty';
import GroupList from './value';
import './index.scss';

class SearchPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // props.isCustomData ? props.dataSource : [],
      loading: false,
      value: '',
    };
  }

  onSearch = async (value = '') => {
    this.setState({ value });
    this.props.setSearching(!!value);
    if (!value) {
      this.setState({ data: [] });
      return;
    }
    if (this.props.isCustomData) {
      if (this.props.onSearchChange) {
        this.setState({
          loading: true,
        });
        const searchData = await this.props.onSearchChange(value);
        this.setState({
          data: searchData,
          loading: false,
        });
        return;
      }
      this.setState({
        data: filterMembers(this.props.dataSource, value),
        loading: false,
      });
    } else {
      this.fetch(value);
    }
  }

  fetch = (q = '') => {
    this.setState({ loading: true });
    exceed.fetch({
      api: 'searchAll',
      data: { q },
    }).then(({ data }) => {
      const allResultMembers = [
        ...lodashGet(data.result, 'members.result', []).map(i => ({ ...i, memberType: 'user' })),
        ...lodashGet(data.result, 'teams.result', []).map(i => ({ ...i, memberType: 'team' })),
        ...lodashGet(data.result, 'roles.result', []).map(i => ({ ...i, memberType: 'role' })),
      ];
      this.setState({
        data: allResultMembers,
        loading: false,
      });
    });
  }

  teamArrowClick = (id) => {
    this.onSearch('');
    this.props.pushHistory(id);
  }

  render() {
    const { loading, data, value } = this.state;
    const { debounceWait } = this.props;
    return (
      <>
        <div className="uiless-member-search-wrap">
          <Search
            autoFocus={this.props.autoFocus}
            className="uiless-member-search"
            onChange={debounce(this.onSearch, debounceWait)}
            placeholder="请输入关键字或邮箱查找"
          />
        </div>
        {
          loading && value &&
          <div className="uiless-member-members">
            <Loading style={{ display: 'block' }} />
          </div>
        }
        {
          !loading && value && data.length === 0 &&
          <div className="uiless-member-members">
            <Empty />
          </div>
        }
        {
          !loading && value && data.length > 0 &&
          <GroupList
            {...this.props}
            data={data}
            hasTeamArrow={!this.isCustomData}
            teamArrowClick={this.teamArrowClick}
            style={{ height: 'unset', flex: 1, overflow: 'auto' }}
          />
        }

      </>
    );
  }
}

export default SearchPanel;