import React from 'react';
import { Loading } from '@txdfe/at';
import lodashGet from 'lodash/get';
import AtPath from '@txdfe/at-path';
import exceed from '../../utils/api';
import { groupMembers } from '../../utils/utils';
import MemberList from '../member-list';
import Search from './search';
import './index.scss';


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

  componentDidMount() {
    this.loadData(this.props.historyTeam);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.historyTeam !== this.props.historyTeam) {
      this.loadData(nextProps.historyTeam);
    }
  }

  loadData = (historyTeam) => {
    this.setState({ loading: true });
    if (historyTeam.length) {
      this.loadTeamInfo(historyTeam[historyTeam.length - 1]);
    } else if (this.props.isCustomData) {
      this.setState({
        data: groupMembers(this.props.dataSource).team,
        loading: false,
      });
    } else {
      this.loadFirstLevel();
    }
  }

  loadTeamInfo = async (teamId) => {
    const [memberRes, teamRes] = await Promise.all([
      exceed.fetch({ api: 'getTeamMembersAndSubteams', params: { teamId } }),
      exceed.fetch({ api: 'getTeamInfo', params: { teamId }, data: { withJoinedTeams: true } }),
    ]);
    const subTeams = lodashGet(memberRes, 'data.result.teams.result', []).map(i => ({ ...i, memberType: 'team' }));
    const members = lodashGet(memberRes, 'data.result.members.result', []).map(i => ({ ...i, memberType: 'user' }));
    const teamInfo = {
      ...teamRes.data.result,
      memberType: 'team',
      subTeams,
      members,
    };
    this.setState({
      teamInfo,
      loading: false,
    });
  }

  loadFirstLevel = () => {
    exceed.fetch({
      api: 'getTeams',
      data: {
        onlyFirstLevel: true,
      },
    }).then(({ data }) => {
      const result = data.result.result || [];
      this.setState({
        data: result.map(i => ({ ...i, memberType: 'team' })),
        loading: false,
      });
    });
  }

  clickPath = ({ _id }) => {
    if (_id === 'all') {
      this.props.setIndexState('historyTeam', []);
    } else {
      this.props.pushHistory(_id);
    }
  }

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

  render() {
    const { data, loading, teamInfo = {}, searching } = this.state;
    const { historyTeam, isCustomData } = this.props;
    const isFirstLevel = !historyTeam.length;
    const { subTeams = [], members = [], path = [] } = teamInfo;
    const pathData = [...path];
    pathData.splice(0, 0, { name: '所有部门', _id: 'all' });
    return (
      <div className="uiless-member">
        <Search {...this.props} autoFocus={false} setSearching={this.setSearching} />
        {
          loading && !searching &&
          <div className="uiless-member-members">
            <Loading inline={false} />
          </div>
        }
        {
          !loading && !searching &&
          <div className="uiless-member-members">
            {
              isFirstLevel &&
              <MemberList
                data={data}
                {...this.props}
                hasTeamArrow={!isCustomData}
                teamArrowClick={this.props.pushHistory}
              />
            }
            {
              !isFirstLevel &&
              <>
                <AtPath
                  dataSource={pathData}
                  className="uiless-member-path"
                  itemClick={this.clickPath}
                  maxWidth={408}
                />
                <MemberList style={{ marginBottom: 4 }} data={[teamInfo]} {...this.props} />
                {
                  !!subTeams.length &&
                  <div className="uiless-member-subTeams">
                    <MemberList data={subTeams} {...this.props} hasTeamArrow teamArrowClick={this.props.pushHistory} />
                  </div>
                }
                <div className="uiless-member-team-line" />
                <MemberList data={members} title="成员" {...this.props} />
              </>
            }
          </div>
        }
      </div>
    );
  }
}

export default RolePanel;