import * as React from 'react';
import { Layout, Menu, Space, Dropdown } from 'antd';
import StoreContext from '../../hooks/StoreContext';
import BlueBackground from './static/blue-bg.png'
import {
	LoginOutlined,
	SettingOutlined,
	DownOutlined,
  UserOutlined,
  HomeOutlined
} from '@ant-design/icons';
import { Switch, Route, RouteComponentProps, Link } from 'react-router-dom';
import { adminMenuConfig } from '../../config/menuConfig';
import './index.scss';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
const AdminLayout: React.FC<RouteComponentProps & { routes: any[] }> = ({
	history,
	routes,
}) => {
	const {
		location: { pathname },
	} = history;
	const value = React.useContext(StoreContext);
	const [state, setState] = React.useState(() => {
		const openKeys: string[] = [],
			selectedKeys: string[] = [];
		adminMenuConfig.forEach((menus) => {
			if (menus.childs) {
				menus.childs.forEach((element) => {
					if (element.path === pathname) {
						openKeys.push(menus.key);
						selectedKeys.push(element.key);
					}
				});
			} else {
				if (menus.path === pathname) {
					selectedKeys.push(menus.key);
				}
			}
		});
		return {
			openKeys,
			selectedKeys,
		};
	});
	const handleSwitchRoute = ({ item, key, keyPath, domEvent }) => {
		history.push(item.props['data-path']);
	};
	const onOpenChange = (openKeys) => {
		const latestOpenKey = openKeys.find(
			(key) => state.openKeys.indexOf(key) === -1
		);

		setState((preState) => ({
			...preState,
			openKeys: latestOpenKey ? [latestOpenKey] : [],
		}));
	};
	return (
		<Layout className='admin-layout'>
			<Header className='admin-header' style={{
			  backgroundImage: `url(${BlueBackground})`
      }}>
				<div className='admin-logo'>
					{/*<Link to='/'>{value.projectInfo.name}</Link>*/}
          <span style={{
            marginLeft: '16px'
          }}>管理中心</span>
				</div>
        <div>
          <HomeOutlined
            className="back-home-icon"
            onClick={() => history.push('/')}
            title="返回首页"
          />
          <Dropdown
            overlay={() => {
              return (
                <Menu>
                  <Menu.Item>
                    <Link to='/admin/setup'>
                      <SettingOutlined /> 个人中心
                    </Link>
                  </Menu.Item>
                  <Menu.Item>
                    <a
                      target='_blank'
                      rel='noopener noreferrer'
                      onClick={() => {
                        localStorage.clear();
                        sessionStorage.clear();
                        location.href = '/login';
                      }}>
                      <LoginOutlined/> 退出
                    </a>
                  </Menu.Item>
                </Menu>
              );
            }}>
            <a className='ant-dropdown-link' style={{
              color: 'white'
            }} onClick={(e) => e.preventDefault()}>
              <Space className="header-right-info">
                <UserOutlined />
                <span className='layout-header-username'>
								  {value.userInfo.username}
							  </span>
                <DownOutlined></DownOutlined>
              </Space>
            </a>
          </Dropdown>
        </div>
			</Header>
			<Layout className='site-layout'>
				<Sider style={{
          background: `url(${BlueBackground}) no-repeat -100px`
        }} collapsible className='admin-sider'>
					<Menu
						theme='light'
						mode='inline'
						openKeys={state.openKeys}
						onSelect={handleSwitchRoute}
						defaultSelectedKeys={state.selectedKeys}
						onOpenChange={onOpenChange}>
						{adminMenuConfig.map((menus) => {
							if (menus.childs) {
								return (
									<SubMenu
										key={menus.key}
										title={menus.title}
										icon={menus.icon}>
										{menus.childs.map((childMenu) => {
											return (
												<Menu.Item
													key={childMenu.key}
													icon={childMenu.icon}
													data-path={childMenu.path}>
													{childMenu.title}
												</Menu.Item>
											);
										})}
									</SubMenu>
								);
							}
							return (
								<Menu.Item
									key={menus.key}
									icon={menus.icon}
									data-path={menus.path}>
									{menus.title}
								</Menu.Item>
							);
						})}
					</Menu>
				</Sider>
				<Layout>
					<Content
						className='site-layout-background'
						style={{
							padding: '20px 24px',
						}}>
						<Switch>
							{routes.map((route) => {
								return (
									<Route
										key={route.path}
										path={route.path}
										exact={route.exact}
										render={(props) => (
											<route.component {...props} routes={route.routes} />
										)}
									/>
								);
							})}
						</Switch>
					</Content>
				</Layout>
			</Layout>
		</Layout>
	);
};
export default AdminLayout;
