import css from './index.module.css';
import {FC, Suspense} from 'react';
import {Layout} from 'antd';
import logo from '@assets/images/logo.png';
import Menu from './menu';
import User from './user';
import {Auth, ErrorBoundary} from '@components';
import HomeSkeleton from './Skeleton';
import BtnGroup from './btn-group';
import FullScreenBtn from './fullscreen';
import Main from './main';
import {useStore} from 'zustand';
import {tabStore} from '@stores';

const Home: FC = function () {
  const setActiveKey = useStore(tabStore, state => state.setActiveKey);
  function toHome() {
    setActiveKey('-1');
  }

  return (
    <Layout className='container'>
      <Layout.Header className={css.header}>
        <section onClick={toHome} className={css.logo}>
          <img src={logo} alt='logo' />
        </section>
        <section className={css.btnGroup}>
          <BtnGroup />
          <User />
          <FullScreenBtn />
        </section>
      </Layout.Header>

      <Layout hasSider>
        <Menu />
        <Main />
      </Layout>
    </Layout>
  );
};

const HomeSuspense: FC = function () {
  return (
    <Auth>
      <main className='container'>
        <ErrorBoundary>
          <Suspense fallback={<HomeSkeleton />}>
            <Home />
          </Suspense>
        </ErrorBoundary>
      </main>
    </Auth>
  );
};

export default HomeSuspense;
