import React, { useEffect } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Paper } from '@mui/material';
import { styled } from '@mui/system';

import TopBar from '@comp/top-bar/index';
import StatusBar from '@comp/status-bar/index';
import AppBar from '@comp/app-bar/index';
import RightBar from '@comp/right-bar/index';
import Header from '@comp/header/index';
import Footer from '@comp/footer/index';
import AppLock from '@con/app-lock';
import moLock from '@con/store/app-lock';
import AppLoading from '@con/app-loading';
import AppDial from '@con/app-dial';
import moLoading from '@con/store/app-loading';
import { GridPaper  } from '@styled/index';

interface IProps {}
interface IState {}

const DPaper = styled(GridPaper)(() => ({
  position: 'fixed',
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
  gridTemplateRows: '2rem 1fr 2rem',
}));

const EPaper = styled(GridPaper)(() => ({
  gridTemplateColumns: '5rem 1fr 2rem',
  overflow: 'hidden',
}));

const FPaper = styled(GridPaper)(() => ({
  gridTemplateRows: '5rem 1fr 5rem',
  overflowY: 'auto',
}));

const Dashboard = (props: IProps, state: IState) => {
  const navi = useNavigate;
  const { isLock } = moLock;
  const { isLoading } = moLoading;

  useEffect(() => {
    return () => {};
  }, []);

  return (
    <DPaper>
      <TopBar />
      <EPaper>
        <AppBar />
        <FPaper>
          <Header />
          <Outlet />
          <Footer />
        </FPaper>
        <RightBar />
      </EPaper>
      <StatusBar />

      <AppDial />
      {isLock ? <AppLock /> : null}
      {isLoading ? <AppLoading /> : null}
    </DPaper>
  );
};

export default observer(Dashboard);