import React, { useEffect } from 'react';
import { Layout, Spin } from 'antd';
import { useLocation, Outlet } from "react-router-dom";
import useUserModel from '@/store/user';
import useSystemModel from '@/store/system';
import useRoute from '@/utils/hooks/useRoute';
import Loading from '@/components/Loading';
import RequireLogin from '@/components/auth/RequireLogin';
import SiderBar from './components/SiderBar';
import Header from './components/Header';
import Container from './components/Container';
import HtmlTitle from './components/HtmlTitle';

import './style.less';

export default (props) => {
  const [theme] = useSystemModel(s => s.theme);
  const [userModel] = useUserModel();
  const { user } = userModel || {};

  const { meta } = useRoute() || {};
  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};

  return (
    <Loading loading={!user} size="large">
      <HtmlTitle />
      <RequireLogin loading={null}>
        {
          noLayout
            ? <Outlet />
            : (
              <Layout style={{ height: '100vh' }}>
                <Header theme={theme} />
                <Layout style={{ height: 'calc(100vh - var(--header-height))' }}>
                  { !noSiderBar && <SiderBar theme={theme} /> }
                  <Container noFooter={noFooter} />
                </Layout>
              </Layout>
            )
        }
      </RequireLogin>
    </Loading>
  );
}
