import React, { FC } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { useTitle } from 'components/easyUse';
import GroupMenu from './components/GroupMenu';
import AlertBar from './components/AlertBar';
import useAlertBar from './hooks/useAlertBar';
import { RootState } from 'models';
import classnames from 'classnames';
import { ConfigProvider } from '@easyv/react-gui';

import styles from './index.less';

type IProps = ConnectedProps<typeof connector>;

const ScreenListPage: FC<IProps> = ({ userInfo, children }) => {
  useTitle('我的应用');
  const [showAlertBar, maxHeight, closeAlertBar] = useAlertBar({ originExp: userInfo.originExp, type: userInfo.type });
  return (
    <ConfigProvider>
      {showAlertBar && <AlertBar exp={userInfo.exp} handleClose={closeAlertBar} />}

      <div className={styles.container}>
        <div
          className={classnames(styles.sider)}
          style={{
            maxHeight
          }}>
          <GroupMenu />
        </div>

        <div
          className={styles.content}
          style={{
            maxHeight
          }}>
          {children}
        </div>
      </div>
    </ConfigProvider>
  );
};

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

const connector = connect(mapStateToProps);

export default connector(ScreenListPage);
