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 '../components/ArticleSearchResults';
import { Sidebar } from '../components/Sidebar';
import useLibrariesTitle from '../hooks/useLibrariesTitle';
import { useSidebarSearchQuery } from '../hooks/useSidebarSearchQuery';

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

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

export default LibraryLayout;
