import { CollaspedType } from '@/types/LayoutType';
import { Outlet, useModel } from '@umijs/max';
import {Avatar, Layout, Popover, Tabs} from 'antd';
import { Header } from 'antd/es/layout/layout';
import React, {useEffect, useState} from 'react';
import SideMenu from './SideMenu';
import UserPopover from './UserPopContent';
import './styles/index.less';
import {history, useLocation, useRouteProps} from "@@/exports";
const { Sider, Content } = Layout;

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
};

const layoutStyle = {
  overflow: 'hidden',
  height: '100vh',
};



const App: React.FC = () => {
  const [menuWidth] = useState(CollaspedType.OPEN);
  const { userInfo } = useModel('global');
  const routeProps = useRouteProps();
  const location = useLocation();
  const [selectedKeys, setSelectedKeys] = useState(location.pathname);

  useEffect(() => {
    if(location.pathname) {
      setSelectedKeys(location.pathname);
    }
  }, [location.pathname]);
  return (
    <Layout style={layoutStyle}>
      <Sider theme="light" width={menuWidth} style={siderStyle}>
        <SideMenu
          initWidth={menuWidth}
          onCollaped={() => {}}
        />
      </Sider>
      <Layout>
        <Header className="app-header">
          <Popover placement="bottom" content={<UserPopover />}>
            <div className="header-user">
              <Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>
                {userInfo.realName.charAt(0)}
              </Avatar>
              <span className="header-user-name"> {userInfo.realName}</span>
            </div>
          </Popover>
        </Header>
        <Content style={contentStyle}>
          <Tabs
            tabBarStyle={{ backgroundColor: '#fff', padding: '5px 20px 0' }}
            defaultActiveKey={selectedKeys}
            items={routeProps.custom}
            onChange={(e) => {
              history.push(e);
            }}
          />
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};


export default App;