import React, { memo, useCallback, useState, useEffect } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { RootState } from 'models';
import SideMenu from './components/SideMenu';
import TemplatePanel from './components/templatePanel';
import ConstantPanel from './components/constantPanel';
import MobileConstantPanel from './components/mobileConstant';
import FontPanel from './components/fontPanel';
import ThemePanel from './components/themePanel';
import KeyPanel from './components/keyPanel';
import ModulePanel from './components/modulePanel';
import CustomConstantPanel from './components/customConstant';
import styles from './index.less';
import Material from './components/material';
import Resource from './components/resource';
import MarketResource from './components/marketResource';
import MarketMaterial from './components/marketMaterial';
import TransferScroll from 'containers/TransferScroll';
import ModalLibrary from './components/modalLibrary';
import MarketModalLibrary from './components/marketModalLibrary';
import ThemePackPanel from './components/themePackPanel';

type IProps = ConnectedProps<typeof connector>;

function AdminPage({ userInfo }: IProps) {
  const [current, setCurrent] = useState('constant');

  const renderPanel = (current) => {
    switch (current) {
      case 'constant':
        return <ConstantPanel />; // 1
      case 'mobileConstant':
        return <MobileConstantPanel />; //1
      case 'font':
        return <FontPanel />; //1
      case 'template':
        return <TemplatePanel />; //1
      case 'key':
        return <KeyPanel />; //1
      case 'theme':
        return <ThemePanel />; //1
      case 'module':
        return <ModulePanel />; //素材库
      case 'customConstant':
        return <CustomConstantPanel />; //1
      case 'material':
        return <Material />; //1
      case 'resource':
        return <Resource />; //1
      case 'modalLibrary':
        return <ModalLibrary />; //1
      case 'marketMaterial':
        return <MarketMaterial />; //1
      case 'marketResource':
        return <MarketResource />; //1
      case 'marketModalLibrary':
        return <MarketModalLibrary />; //1
      case 'themePack':
        return <ThemePackPanel />; //1
      default:
        return null;
    }
  };

  useEffect(() => {
    if (userInfo.role != 2 || userInfo.type === 'education') {
      // 非root用户不允许试用admin 组件开发功能
      window.location.href = window.appConfig.HOME_URL;
    }
  }, []);

  const handleMenuChange = useCallback((value) => {
    setCurrent(value);
  }, []);

  return (
    <div className={styles.container}>
      <SideMenu current={current} onClick={handleMenuChange} />
      <div className={styles.content}>
        <TransferScroll />
        <div className="panel">{renderPanel(current)}</div>
      </div>
    </div>
  );
}

const mapStateToProps = ({ user }: RootState) => {
  return {
    userInfo: user.userInfo
  };
};

const connector = connect(mapStateToProps);

export default connector(memo(AdminPage));
