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

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

import HuTitle from '@material-hu/components/design-system/Title';

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

import { SurveysList } from './components';

const ManagerSurveys = () => {
  const { t } = useLokaliseTranslation('people_experience');
  const HuGoThemeProvider = useHuGoTheme();
  const pageRef = useRef<HTMLDivElement>(null);

  const pageTitle = t('TEAM_RESULTS');

  const handleScrollToTop = () => {
    pageRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <>
      <Helmet>
        <title>{formatTitle(pageTitle)}</title>
      </Helmet>
      <HuGoThemeProvider>
        <Stack
          sx={{
            gap: 4,
            py: 8,
            px: 12,
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
            height: '100%',
            overflowY: 'auto',
          }}
          ref={pageRef}
        >
          <Stack
            sx={{
              gap: 2,
              flex: 0,
              flexWrap: 'wrap',
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            <HuTitle
              sx={{ flex: 1 }}
              variant="XL"
              title={pageTitle}
            />
          </Stack>
          <SurveysList onScrollToTop={handleScrollToTop} />
        </Stack>
      </HuGoThemeProvider>
    </>
  );
};

export default ManagerSurveys;
