import FuseSuspense from '@fuse/core/FuseSuspense';
import AppContext from 'src/app/contexts/AppContext';
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
import i18next from 'i18next';
import { memo, useContext, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useLocation, useRoutes } from 'react-router-dom';
import { useAuth } from 'src/app/contexts/AuthContext';
import FooterLayout2 from './components/FooterLayout2';
import HeaderLayout2 from './components/HeaderLayout2';

import en from './i18n/en';

i18next.addResourceBundle('en', 'layout2', en);

function Layout2(props) {
  const config = useSelector(selectFuseCurrentLayoutConfig);
  const authContext = useAuth();
  const appContext = useContext(AppContext);
  const { routes } = appContext;
  const location = useLocation();

  useEffect(() => {
    const { hash } = location;

    if (hash) {
      const target = document.querySelector(hash);
      target.scrollIntoView({ behavior: 'smooth' });
    }
  }, [location]);

  return (
    <>
      {config.header.display && <HeaderLayout2 isAuthenticated={authContext.isAuthenticated} />}
      <main id="fuse-main" className="flex flex-col min-h-full min-w-full mt-72">
        <FuseSuspense>{useRoutes(routes)}</FuseSuspense>
        {props.children}
      </main>
      {config.footer.display && <FooterLayout2 />}
    </>
  );
}

export default memo(Layout2);
