import { useEffect } from "react";
import { Layout } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import SideBar from "./sidebar";
import Navbar from "./navbar";
import AppMain from "./appmain";
import '../assets/styles/layout.scss'
import { addRoutes, getAsyncRouters } from '../stores/permission';

const { Header, Sider, Content } = Layout;

export default function LayOut() {
  const collapsed = useSelector((store: any) => store.sidebar)
  const dispatch = useDispatch()
  const requestAsyncRoutes = async () => {
    const { payload } = await dispatch(getAsyncRouters() as any)
    dispatch(addRoutes(payload))
  }
  useEffect(()=>{
    requestAsyncRoutes()
  }, [])

  window.addEventListener('unload', ()=>{
    requestAsyncRoutes()
  })
  return(
    <Layout className="layout-box">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <SideBar/>
      </Sider>
      <Layout>
        <Header className="navbar-box">
          <Navbar/>
        </Header>
        <Content>
          <AppMain/>
        </Content>
      </Layout>
    </Layout>
  )
}