import React, { useState, useMemo } from 'react';
import { Layout as ALayout, Menu } from 'antd';
import Icon from './../Icon/Icon';
import { handAppMenus } from './utils';
import Context from './../Context';
import useConfig from './../../use/useConfig';
import style from './layout.module.scss';

const { Sider, Content } = ALayout;
const { SubMenu, Item } = Menu;

interface LayoutProps {
  appCode: string;
  appName: string;
}

const Layout: React.FC<LayoutProps> = ({ children, appCode, appName }) => {
  const config = useConfig();
  const menus: any[] = handAppMenus(appCode);
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  const [collapsed, setCollapsed] = useState(sessionStorage.collapsed == 1);

  const onOpenChange = (keys: React.Key[]) => {
    setOpenKeys(keys.map(item => item.toString()))
  }

  function changeCollapsed() {
    setCollapsed(true);
    sessionStorage.collapsed = 1;
  }

  function onMenuClick(e: { key: string }) {
    config.history?.push(e.key)
  }

  const contextValue = useMemo(() => {
    return {
      collapsed,
      changeCollapsed: () => {
        setCollapsed(false);
        sessionStorage.collapsed = 0;
      }
    }
  }, [collapsed]);

  return (
    <ALayout className={style.layout}>
      <Sider
        trigger={null}
        theme='light'
        width={240}
        collapsed={collapsed}
        collapsedWidth={60}>
        {collapsed ? (
          <div className={style.appName}>
            <Icon
              icon='iconHome'
              className={style.hideIcon}
              style={{ marginLeft: '5px' }} />
          </div>
        ) : (
          <div className={style.appName}>
            <h1>{appName}</h1>
            <Icon
              onClick={changeCollapsed}
              icon='iconshouqidaohang'
              className={style.hideIcon} />
          </div>
        )}
        <Menu
          mode='inline'
          className={style.menu}
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          onClick={onMenuClick}>
          {menus.map((group, index) => (
            <SubMenu
              key={index}
              title={group.title}
              icon={
                <Icon icon={group.icon} />
              }>
              {group.children.map((menu: any) => (
                <Item key={menu.path}>
                  {menu.name}
                </Item>
              ))}
            </SubMenu>
          ))}
        </Menu>
      </Sider>
      <Content className={style.context}>
        <Context.Provider value={contextValue}>
          {children}
        </Context.Provider>
      </Content>
    </ALayout>
  )
}

export default Layout;