import { Helmet } from 'react-helmet-async';
import { useNavigate, useParams } from 'react-router-dom';

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

import Breadcrumbs from '@material-hu/components/design-system/Breadcrumbs';
import { type BreadcrumbLink } from '@material-hu/components/design-system/Breadcrumbs/types';

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

import AcknowledgementCard from '../components/AcknowledgementCard';
import { useGetAcknowledgement } from '../hooks/useGetAcknowledgement';
import useKudosTitle from '../hooks/useKudosTitle';
import { acknowledgementsRoutes } from '../routes';

const AcknowledgementCardDetail = () => {
  const { id } = useParams();
  const acknowledgementId = id ? parseInt(id) : undefined;
  const HugoThemeProvider = useHuGoTheme();
  const navigate = useNavigate();
  const title = useKudosTitle();

  const { t } = useLokaliseTranslation('acknowledgements');

  const { data: acknowledgement, isLoading: isLoadingAcknowledgement } =
    useGetAcknowledgement(acknowledgementId);

  const links: BreadcrumbLink[] = [
    {
      title: t('all_acknowledgements'),
      onClick: () => navigate(acknowledgementsRoutes.acknowledgements()),
    },
    { title: acknowledgement?.category?.name ?? '' },
  ];

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Container
        maxWidth="lg"
        sx={{ py: 2 }}
      >
        <Breadcrumbs
          links={links}
          loading={isLoadingAcknowledgement}
        />
        <Stack sx={{ maxWidth: '600px', mx: 'auto', mt: 4 }}>
          <AcknowledgementCard
            acknowledgement={acknowledgement}
            isDetailPage
            isLoading={isLoadingAcknowledgement}
          />
        </Stack>
      </Container>
    </HugoThemeProvider>
  );
};

export default AcknowledgementCardDetail;
