import React, { memo } from 'react';
import { Layout } from '@miragenflow/ui/layout';
import { Space } from '@miragenflow/ui/space';
import { MiragenFlowButton } from '@miragenflow/ui';
import { ViewListIcon } from 'components/LineIcons';
import { useAppDispatch, useAppSelector } from 'modules/store';
import { selectGlobal, toggleMenu } from 'modules/global';
import HeaderIcon from './HeaderIcon';
import { HeaderMenu } from '../Menu';
import Style from './index.module.less';

const { Header } = Layout;

export default memo((props: { showMenu?: boolean }) => {
  const globalState = useAppSelector(selectGlobal);
  const dispatch = useAppDispatch();

  if (!globalState.showHeader) {
    return null;
  }

  let HeaderLeft;
  if (props.showMenu) {
    HeaderLeft = (
      <div>
        <HeaderMenu />
      </div>
    );
  } else {
    HeaderLeft = (
      <Space align='center'>
        <MiragenFlowButton
          aria-label={globalState.collapsed ? '展开菜单' : '收起菜单'}
          className={Style.menuButton}
          shape='square'
          size='large'
          type='text'
          onClick={() => dispatch(toggleMenu(null))}
          icon={<ViewListIcon />}
        />
      </Space>
    );
  }

  return (
    <Header className={Style.panel}>
      {HeaderLeft}
      <HeaderIcon />
    </Header>
  );
});