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

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

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

import { KudosCategoryFilter } from './components/KudosCategoryFilter';
import { KudosList } from './components/KudosList';
import { KudosPointsCard } from './components/KudosPointsCard';
import { KudosRanking } from './components/KudosRanking';
import useAcknowledgementSocket from './hooks/useAcknowledgementSocket';
import useKudosTitle from './hooks/useKudosTitle';
import useReactionsSocket from './hooks/useReactionsSocket';

const Acknowledgements = () => {
  const HugoThemeProvider = useHuGoTheme();
  const title = useKudosTitle();

  useAcknowledgementSocket();
  useReactionsSocket();

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <HugoThemeProvider>
        <Container
          maxWidth="xl"
          sx={{ py: 3 }}
        >
          <Stack sx={{ gap: 2, maxWidth: '1025px', mx: 'auto' }}>
            <Typography
              variant="globalL"
              fontWeight="fontWeightSemiBold"
              component="h1"
            >
              {title}
            </Typography>
            <KudosCategoryFilter />
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 3,
                width: '100%',
                justifyContent: 'center',
              }}
            >
              <KudosList />
              <Stack
                sx={{
                  gap: 2,
                  height: 'fit-content',
                  width: '100%',
                  maxWidth: 450,
                }}
              >
                <KudosPointsCard />
                <KudosRanking />
              </Stack>
            </Stack>
          </Stack>
        </Container>
      </HugoThemeProvider>
    </>
  );
};

export default Acknowledgements;
