import { useEffect } from 'react';
import { Outlet } from 'react-router-dom';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { CollaboratorsProvider } from './contexts/CollaboratorContext';
import { prefetchPendingRequestsAmount } from './queries';

const BaseLayout = () => {
  // locale translation files will be loaded for all children
  useLokaliseTranslation(['time_tracker', 'time_tracking_common']);
  const HuGoThemeProvider = useHuGoTheme();

  useEffect(() => {
    prefetchPendingRequestsAmount();
  }, []);

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
          minHeight: '100%',
        }}
      >
        <CollaboratorsProvider>
          <Outlet />
        </CollaboratorsProvider>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default BaseLayout;
