import { useRef } from 'react';
import { Helmet } from 'react-helmet-async';

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

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

import PeopleTable from 'src/components/dashboard/people/components/PeopleTable';
import ModuleTabs from 'src/components/dashboard/people/ModuleTabs';

const TAB_VALUE = 0;

const People = () => {
  const { t } = useLokaliseTranslation('people');

  const HugoThemeProvider = useHuGoTheme();
  const pageRef = useRef<HTMLDivElement>(null);

  const handleScrollToTop = () => {
    pageRef.current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('PEOPLE'))}</title>
      </Helmet>
      <HugoThemeProvider>
        <Stack
          ref={pageRef}
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
            pl: 3,
            pt: 2,
          }}
        >
          <ModuleTabs tabValue={TAB_VALUE} />
        </Stack>
        <Container
          sx={{
            maxHeight: '100%',
            maxWidth: '1100px !important',
            py: 5,
          }}
        >
          <PeopleTable handleScrollToTop={handleScrollToTop} />
        </Container>
      </HugoThemeProvider>
    </>
  );
};

export default People;