import { Helmet } from 'react-helmet-async';
import { Outlet } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';

import { ArticleSearchResults } from '../Article/components/ArticleSearch/SearchResults';
import { Sidebar } from '../components/Sidebar';
import { useHiddenSidebar } from '../hooks/useHiddenSidebar';
import { useLibrariesTitle } from '../hooks/useLibrariesTitle';
import { useSidebarSearchQuery } from '../hooks/useSidebarSearchQuery';

export const LibraryLayout = () => {
  const title = useLibrariesTitle();
  const HuGoThemeProvider = useHuGoTheme();
  const { hasSearch } = useSidebarSearchQuery();
  const hideSidebar = useHiddenSidebar();

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <HuGoThemeProvider>
        <Stack
          sx={{
            flexDirection: 'row',
            height: '100%',
            overflow: 'hidden',
          }}
        >
          {!hideSidebar && <Sidebar />}
          {!hasSearch && <Outlet />}
          {hasSearch && <ArticleSearchResults />}
        </Stack>
      </HuGoThemeProvider>
    </>
  );
};

export default LibraryLayout;