import React, { memo } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import styles from './index.less';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

const sildeMenuList = [
  { title: '组件管理', iconClassName: 'icon-constant', clickParam: 'constant' },
  { title: '终端组件管理', iconClassName: 'icon-constant-mobile', clickParam: 'mobileConstant' },
  { title: '全局主题包', iconClassName: 'icon-theme', clickParam: 'themePack' },
  { title: '主题管理', iconClassName: 'icon-theme', clickParam: 'theme' },
  // { title: '素材库', iconClassName: 'icon-modules', clickParam: 'module' },//TODO 屏蔽旧的素材库，两个迭代后删除代码
  {
    title: '模板管理',
    iconClassName: 'icon-template',
    clickParam: 'template',
    hide: window.appConfig.LOCAL,
  }, // 只有独立部署展示模板管理
  { title: '字体管理', iconClassName: 'icon-font', clickParam: 'font' },
  { title: '密钥管理', iconClassName: 'icon-developer-key', clickParam: 'key' },
  { title: '自定义组件', iconClassName: 'icon-constant-custom', clickParam: 'customConstant' },
  { title: '设计素材', iconClassName: 'icon-constant-custom', clickParam: 'material' },
  { title: '主题资源', iconClassName: 'icon-constant-custom', clickParam: 'resource' },
  { title: '模型库', iconClassName: 'icon-constant-custom', clickParam: 'modalLibrary' },
  { title: '设计素材', iconClassName: 'icon-constant-custom', clickParam: 'marketMaterial' },
  { title: '主题资源', iconClassName: 'icon-constant-custom', clickParam: 'marketResource' },
  { title: '模型库', iconClassName: 'icon-constant-custom', clickParam: 'marketModalLibrary' },
];

const isLocal = window.appConfig.LOCAL;

function SideMenu({ current, onClick }) {
  const { checkAuth } = useAuth();

  return (
    <ul className={styles.menu}>
      {sildeMenuList.slice(0, sildeMenuList.length - 3).map((item) => {
        if (
          !checkAuth(modules.componentDevelop) &&
          (item.clickParam === 'key' || item.clickParam === 'customConstant')
        ) {
          return null;
        }

        return (
          <li
            key={item.clickParam}
            className={classNames(styles.menuItem, {
              [styles.active]: current === item.clickParam,
            })}
            onClick={() => onClick(item.clickParam)}>
            <i className={`icon iconfont ${item.iconClassName}`} />
            <span>{item.title}</span>
          </li>
        );
      })}
      {!isLocal && (
        <>
          <div style={{ padding: '0 16px', color: '#999' }}>素材广场</div>
          {sildeMenuList.slice(sildeMenuList.length - 3, sildeMenuList.length).map((item) => (
            <li
              key={item.clickParam}
              className={classNames(styles.menuItem, {
                [styles.active]: current === item.clickParam,
              })}
              onClick={() => onClick(item.clickParam)}>
              <i className={`icon iconfont ${item.iconClassName}`} />
              <span>{item.title}</span>
            </li>
          ))}
        </>
      )}
    </ul>
  );
}

const mapStateToProps = ({ user }) => {
  return {
    userType: user.userInfo.type,
  };
};

export default connect(mapStateToProps)(memo(SideMenu));
