import React from 'react';
import PropTypes from 'prop-types';
import { Dialog } from '@txdfe/at';
import HomePanel from './components/panel';
import TeamPanel from './components/panel/team';
import RolePanel from './components/panel/role';
import GroupPanel from './components/panel/group';
import RoleWithMemberPanel from './components/panel/role-with-member';
import ValuePanel from './components/panel/value';
import MiniUilessMember from './mini';
import SubmitPanel from './components/submit-panel';
import { groupMembers, fillMembersInfo, apimapCreator, requestFilter } from './utils/utils';
import exceed from './utils/api';
import apimap from './utils/api/apimap';
import lodashGet from 'lodash/get';
import MembersInRole from './components/panel/members-in-role';
import MembersInGroup from './components/panel/members-in-group';
import './index.scss';

const { StepDialog, StepView } = Dialog;
let notConfigExceedFlag = true;

class UilessMember extends React.Component {
  static propTypes = {
    useGroupFeatures: PropTypes.bool, // 开启新的群组选择
    uiless_config: PropTypes.object,
    type: PropTypes.oneOf(['normal', 'mini']),
    multiple: PropTypes.bool,
    extraMemberTypes: PropTypes.array,
    value: PropTypes.array,
    onChange: PropTypes.func,
    customRoles: PropTypes.array,
    title: PropTypes.string,
    trigger: PropTypes.element,
    dataSource: PropTypes.array,
    mode: PropTypes.string,
    visible: PropTypes.bool, // 不可设置默认值，用以判断用户是否要控制visible
    onVisibleChange: PropTypes.func,
    onRequestClose: PropTypes.func,
    onSearch: PropTypes.func,
    loading: PropTypes.bool,
    okText: PropTypes.string,
    cancelText: PropTypes.string,
    ready: PropTypes.func,
    debounceWait: PropTypes.number,
    defaultList: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.string, // default,  recommend
    ]),
    defaultListName: PropTypes.string,
    pageSize: PropTypes.number,
  }

  static defaultProps = {
    useGroupFeatures: true,
    multiple: false,
    extraMemberTypes: [],
    value: [],
    onChange() {},
    customRoles: [],
    title: '添加成员',
    mode: 'add',
    onVisibleChange: () => {},
    onRequestClose: () => {},
    loading: false,
    okText: '确定',
    cancelText: '取消',
    ready: () => {},
    defaultListName: '成员',
    debounceWait: 200,
    defaultList: 'default',
    uiless_config: window.UILessConfig,
    pageSize: 50,
  }

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      currentValue: props.mode === 'add' ? [] : props.value,
      currentRole: props.customRoles.length ? props.customRoles[0] : {},
      currentStep: 'home', // home、role、team、value
      historyTeam: [], // 历史部门
      stateLoading: false,
      pagePayload: null,
    };
  }

  componentDidMount() {
    if (notConfigExceedFlag) {
      notConfigExceedFlag = false;
      exceed.use(apimapCreator(apimap, this.props.uiless_config));
      exceed.interceptors.request.use((config) => {
        return requestFilter(config, this.props.uiless_config);
      }, (error) => {
        return Promise.reject(error);
      });
    }
  }

  componentWillReceiveProps({ visible }) {
    if (visible && this.props.visible !== visible) {
      this.fillValueInfo(this.props.value);
    }
  }

  fillValueInfo = (value) => {
    if (!value.length || Array.isArray(this.props.dataSource)) return;
    const { user, team, role } = groupMembers(value);
    exceed.fetch({
      api: 'searchAllByIds',
      data: {
        userIds: user.map(u => u._userId),
        teamIds: team.map(t => t._id),
        roleIds: role.map(r => r._id),
      },
    }).then(({ data }) => {
      const allResultMembers = [
        ...lodashGet(data.result, 'members.result', []),
        ...lodashGet(data.result, 'teams.result', []),
        ...lodashGet(data.result, 'roles.result', []),
      ];
      const currentValue = fillMembersInfo(value, allResultMembers);
      this.props.ready(currentValue);
      if (this.props.mode === 'add') {
        return;
      }
      this.setState({
        currentValue,
      });
    });
  }

  setIndexState = (key, value) => {
    this.setState({
      [key]: value,
    });
  }

  toggleVisible = () => {
    const { visible } = this.state;
    const { onVisibleChange, visible: propsVisible, onRequestClose, mode, value, customRoles } = this.props;
    // 用户没有传递 visible，由组件本身控制visible
    if (propsVisible === undefined) {
      onVisibleChange(!visible);
      // 打开弹框时填充value数据
      !visible && this.fillValueInfo(this.props.value);
      this.setState({
        visible: !visible,
        currentValue: mode === 'add' ? [] : value,
        currentRole: customRoles.length ? customRoles[0] : {},
        currentStep: 'home', // home、role、team、value
        historyTeam: [], // 历史部门
        stateLoading: false,
      });
    } else { // 用户传递 visible，由用户控制visible
      onRequestClose();
    }
  }

  // 点击对话框返回， 判断历史部门列表是否有数据，没有的话回到home，有的话进入最后一个部门详情
  onStepChange = () => {
    const historyTeam = [...this.state.historyTeam];
    if (historyTeam.length > 0) {
      historyTeam.pop();
      this.setState({
        historyTeam,
        currentStep: 'team',
      });
    } else {
      this.setState({
        currentStep: 'home',
      });
    }
  }

  pushHistory = (h) => {
    this.setState({
      historyTeam: [...this.state.historyTeam, h],
      currentStep: 'team',
    });
  }

  pushHistoryByPage = (page, payload) => {
    this.setState({
      currentStep: page,
      pagePayload: payload,
    });
  }

  submit = () => {
    const { currentValue, currentRole } = this.state;
    this.props.onChange(currentValue, currentRole.value);
    if (this.props.visible === undefined) {
      this.toggleVisible();
    }
  }

  renderTrigger = () => {
    const { trigger } = this.props;
    const props = {
      onClick: this.toggleVisible,
    };
    return trigger && React.cloneElement(trigger, props);
  }

  render() {
    const { title, autoFocus, overlayProps, visible: propsVisible, type, multiple, customRoles, extraMemberTypes, loading, dataSource, value: defaultValue, mode, messageProps, defaultListName, defaultList, onSearch, debounceWait, useGroupFeatures, pageSize } = this.props;
    if (type === 'mini') return <MiniUilessMember {...this.props} />;
    const isCustomData = Array.isArray(dataSource);
    const { currentStep, pagePayload, currentValue, historyTeam, stateLoading } = this.state;
    const visible = propsVisible === undefined ? this.state.visible : propsVisible;
    const submitPanel = !multiple ? false : <SubmitPanel {...this.props} {...this.state} setIndexState={this.setIndexState} onOk={this.submit} onCancel={this.toggleVisible} />;
    const panelProps = {
      currentValue,
      multiple,
      setIndexState: this.setIndexState,
      onChange: this.props.onChange,
      customRoles,
      historyTeam,
      pagePayload,
      pushHistory: this.pushHistory,
      pushHistoryByPage: this.pushHistoryByPage,
      extraMemberTypes,
      isCustomData,
      dataSource,
      defaultValue,
      mode,
      pageSize,
    };
    return (
      <>
        {this.renderTrigger()}
        <StepDialog
          closeable
          onClose={this.toggleVisible}
          visible={visible}
          shouldUpdatePosition
          className={`uiless-member-wrap ${multiple ? '' : 'uiless-member-wrap-multiple'}`}
          noBodyPadding
          current={currentStep}
          onStepChange={this.onStepChange}
          loading={loading || stateLoading}
          overlayProps={overlayProps}
        >
          <StepView
            id="home"
            title={title}
            footer={submitPanel}
          >
            <HomePanel
              {...panelProps}
              useGroupFeatures={useGroupFeatures}
              messageProps={messageProps}
              defaultList={defaultList}
              defaultListName={defaultListName}
              autoFocus={autoFocus}
              onSearchChange={onSearch}
              debounceWait={debounceWait}
            />
          </StepView>
          <StepView
            id="role"
            title={title || '从角色添加成员'}
            footer={submitPanel}
          >
            { useGroupFeatures ? <RoleWithMemberPanel {...panelProps} /> : <RolePanel {...panelProps} /> }
          </StepView>
          <StepView
            id="roleMembers"
            title={title || '从角色添加成员'}
            footer={submitPanel}
          >
            <MembersInRole {...panelProps} {...pagePayload} />
          </StepView>
          <StepView
            id="group"
            title={title || '从群组添加成员'}
            footer={submitPanel}
          >
            { useGroupFeatures ? <GroupPanel {...panelProps} /> : <GroupPanel {...panelProps} /> }
          </StepView>
          <StepView
            id="groupMembers"
            title={title || '从群组添加成员'}
            footer={submitPanel}
          >
            <MembersInGroup {...panelProps} {...pagePayload} />
          </StepView>
          <StepView
            id="team"
            title={title}
            footer={submitPanel}
          >
            <TeamPanel {...panelProps} />
          </StepView>
          <StepView
            id="value"
            title="已选对象"
            footer={submitPanel}
          >
            <ValuePanel {...panelProps} data={currentValue} style={{ paddingTop: 16 }} />
          </StepView>
        </StepDialog>
      </>
    );
  }
}
UilessMember.Mini = MiniUilessMember;
export default UilessMember;