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

import { useHuPagination } from '@material-hu/hooks/useHuPagination';
import Stack from '@material-hu/mui/Stack';

import { useLibraryNotFoundHandler } from 'src/pages/dashboard/HuLibraries/hooks/useLibraryNotFoundHandler';
import { formatTitle } from 'src/utils/helmetUtils';

import useLibrariesTitle from '../hooks/useLibrariesTitle';

import LibrarySearchResult from './LibrarySearchResult';
import { Sidebar } from './Sidebar';

export const LibraryLayout = () => {
  const title = useLibrariesTitle();

  useLibraryNotFoundHandler();

  const { form, params, setParams, hasSearch, Search, Pagination } =
    useHuPagination();

  const handleSearchBack = () => setParams(null);

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <FormProvider {...form}>
        <Stack
          sx={{
            flexDirection: 'row',
            height: '100%',
            overflow: 'hidden',
          }}
        >
          <Sidebar Search={Search} />
          {!hasSearch && <Outlet />}
          {hasSearch && (
            <LibrarySearchResult
              Pagination={Pagination}
              params={params}
              onBack={handleSearchBack}
            />
          )}
        </Stack>
      </FormProvider>
    </>
  );
};

export default LibraryLayout;