import { useNavigate } from 'react-router-dom';

import DOMPurify from 'dompurify';
import Container from '@material-hu/mui/Container';

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

import { loanRequestsOptions } from 'src/constants/banBajio';
import { LOAN } from 'src/types/banBajio';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FocusNavbar from 'src/components/FocusNavbar';

import useGetLibrary from '../libraries/hooks/useGetLibrary';

import { banBajioRoutes } from './routes';

const LibraryFullScreen = () => {
  const { t } = useLokaliseTranslation('banbajio');
  const navigate = useNavigate();

  const { data: library } = useGetLibrary(
    loanRequestsOptions.find(option => option.loanType === LOAN.MORTGAGE)!
      .libraryId!,
  );
  if (!library) return null;

  return (
    <FocusNavbar
      navbarProps={{
        title: t('LOAN_INFORMATION'),
        onClick: () => navigate(banBajioRoutes.home()),
      }}
      content={
        <Container maxWidth="md">
          <HuTitle
            title={t('LOAN_INFORMATION')}
            sx={{ mt: 4, mb: 1 }}
          />
          <HuCardContainer sx={{ width: '100%' }}>
            <div
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(library.body, {
                  USE_PROFILES: { html: true },
                }),
              }}
            />
          </HuCardContainer>
        </Container>
      }
    />
  );
};

export default LibraryFullScreen;
