import React, { Component, memo } from 'react';
import classNames from 'classnames';
import { connect } from 'react-redux';
import GalleryGroup from './GalleryGroup';
import ChartTypeList from './ChartTypeList';
import isEqual from 'lodash/isEqual';
import { addComponent } from 'models/component';
import styles from './Gallery.less';
import GalleryAll from './GalleryAll';

const categorys = ['常规图表', '文字', '辅助图形', '指标', '地图', '交互', '其他', '第三方', '定制组件'];
const SUPPORT_NONE = 0;
const SUPPORT_ALL = 1;

interface IProps {
  isAdmin: boolean;
  constants: any[];
  addComponent: () => any;
}

class Gallery extends Component<IProps, { chartType: string; current: number }> {
  controller: AbortController;
  constructor(props) {
    super(props);
    this.state = {
      chartType: '全部',
      current: -1
    };
  }

  componentDidMount() {
    this.controller = window.AbortController && new AbortController();
  }
  componentWillUnmount() {
    this.controller && this.controller.abort();
  }
  getNestedConstants = () => {
    const { constants = [] } = this.props;
    return categorys
      .map((d) => ({
        key: d,
        values: constants.filter((v) => v.category === d)
      }))
      .filter((d) => d.values.length);
  };
  changeChartType = (chartType) => {
    this.setState({
      chartType
    });
  };

  render() {
    const nestedConstants = this.getNestedConstants();
    const { chartType } = this.state;
    return (
      <span className={styles.container}>
        {nestedConstants.map((d, i) => {
          if (!this.props.isAdmin && d.key === '定制组件') {
            return null;
          }
          const list = d.values;
          const isChart = d.key === '常规图表';
          return (
            <span className={styles.cate} key={i}>
              <span>{d.key === '第三方' ? '第三方' : d.key.slice(0, 2)}</span>
              <div
                className={classNames(styles.group, {
                  [styles.chart]: isChart
                })}>
                <span style={{ display: isChart ? 'block' : 'none' }}>
                  <ChartTypeList current={chartType} changeChartType={this.changeChartType} />
                  <GalleryAll current={chartType} list={list} addComponent={this.props.addComponent} />
                </span>
                <span style={{ display: !isChart ? 'block' : 'none' }}>
                  <GalleryGroup list={list} addComponent={this.props.addComponent} />
                </span>
              </div>
            </span>
          );
        })}
      </span>
    );
  }
}

function mapStateToProps({ constants, user }) {
  const constantList = getConstantsIsLock(constants, user);

  return {
    constants: constantList,
    isAdmin: user.userInfo.role > 0
  };
}

export function getConstantsIsLock(constants, user) {
  const { edition = {} } = user.userInfo;
  const { supportConstant = 1, id } = edition;
  let constantList = constants.list.filter((d) => d.show);

  if (!window.appConfig.LOCAL) {
    const dictionaryTable: any = {
      saas_basic: 1,
      saas_vip: 3,
      saas_advanced: 2
    };
    const userVersionCode = dictionaryTable[id];
    // supportConstant == 2 自定义，1全部
    constantList =
      supportConstant === SUPPORT_NONE
        ? constantList.map((d) => ({ ...d, lock: true }))
        : supportConstant === SUPPORT_ALL
        ? constantList.map((d) => ({ ...d, lock: false }))
        : constantList.map((d) => {
            let lock = true;
            if (userVersionCode === 3) {
              lock = false;
            } else if (userVersionCode === 2) {
              lock = d.edition > 2;
            } else {
              lock = !(d.edition === 1);
            }
            return { ...d, lock };
          });
  }
  return constantList;
}

const mapDispatchToProps = {
  addComponent
};
function areEqual(props, nextProps) {
  return isEqual(nextProps.constants, props.constants);
}
export default connect(mapStateToProps, mapDispatchToProps)(memo(Gallery, areEqual));
