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 {ChildrenFC} from '@utils';
import {context, useContextReudcer} from './context';
import {useStore} from 'zustand';
import {tabStore} from '@stores';

const TabProvider: ChildrenFC = function ({children}) {
  const state = useContextReudcer();
  const {Provider} = context;

  return <Provider value={state}>{children}</Provider>;
};

const Home: FC = function () {
  const dispatch = useStore(tabStore, state => state.dispatch);
  function toHome() {
    dispatch('-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>
        <TabProvider>
          <Menu />
          <Main />
        </TabProvider>
      </Layout>
    </Layout>
  );
};

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

export default HomeSuspense;
