import React from 'react';
import PropTypes from 'prop-types';
import { Overlay } from '@txdfe/at';
import MiniPanel from './components/mini-panel';
import { apimapCreator, requestFilter } from './utils/utils';
import exceed from './utils/api';
import apimap from './utils/api/apimap';
import './mini.scss';

const { Popup } = Overlay;

let notConfigExceedFlag = true;
class MiniUilessMember extends React.Component {
  state = {
    visible: false,
  }

  static propTypes = {
    uiless_config: PropTypes.object,
    multiple: PropTypes.bool,
    value: PropTypes.array,
    onChange: PropTypes.func,
    customRoles: PropTypes.array,
    title: PropTypes.string,
    trigger: PropTypes.element,
    triggerType: PropTypes.array,
    dataSource: PropTypes.array,
    mode: PropTypes.string,
    visible: PropTypes.bool, // 不可设置默认值，用以判断用户是否要控制visible
    onRequestClose: PropTypes.func,
    onVisibleChange: PropTypes.func,
    loading: PropTypes.bool,
    okText: PropTypes.string,
    ready: PropTypes.func,
    debounceWait: PropTypes.number,
    defaultList: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.string, // default,  recommend
    ]),
    pageSize: PropTypes.number,
    userTagRender: PropTypes.func
  }

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

  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);
      });
    }
    this.checkValue(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.checkValue(nextProps);
  }

  checkValue = ({ multiple, value, dataSource }) => {
    if (!multiple && value.length > 1) {
      console.warn('You can not set multiple values when multiple is set to false');
    }
    if (dataSource && !Array.isArray(dataSource)) {
      console.warn('dataSource need array');
    }
  }

  toggleVisible = () => {
    const { visible } = this.state;
    const { onVisibleChange, visible: propsVisible, onRequestClose } = this.props;
    // 用户没有传递 visible，由组件本身控制visible
    if (propsVisible === undefined) {
      onVisibleChange(!visible);
      this.setState({
        visible: !visible,
      });
    } else { // 用户传递 visible，由用户控制visible
      onRequestClose();
    }
  }

  onChange = (value, roleId) => {
    this.props.onChange(value, roleId);
    this.toggleVisible();
  }

  render() {
    const { visible: propsVisible } = this.props;
    const visible = propsVisible === undefined ? this.state.visible : propsVisible;
    return (
      <Popup
        {...this.props}
        onVisibleChange={this.toggleVisible}
        visible={visible}
        className="uiless-member-mini-wrap"
        autoFocus={false}
      >
        <div onClick={(e) => { e.stopPropagation(); }}>
          <MiniPanel {...this.props} onChange={this.onChange} toggleVisible={this.toggleVisible} />
        </div>
      </Popup>
    );
  }
}

export default MiniUilessMember;