import { useFormContext, useWatch } from 'react-hook-form';

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

import certificateBg from 'src/assets/courses-certificate-bg.webp';
import humandLogo from 'src/assets/humand.svg';
import useAuth from 'src/contexts/JWTContext';
import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullname } from 'src/utils/userUtils';

const CertificateModel = () => {
  const { t } = useLokaliseTranslation(['learning']);
  const { user, instance } = useAuth();
  const { control } = useFormContext<NewPathFormValues>();

  const title = useWatch({
    control,
    name: 'basic_information.title',
  });

  const date = new Intl.DateTimeFormat(user?.language, {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  }).format(new Date());

  return (
    <Stack
      sx={{ minWidth: '1020px', minHeight: '682px', flexDirection: 'row' }}
    >
      <Stack
        sx={{
          width: '40%',
          height: '100%',
          p: 7,
          justifyContent: 'space-between',
        }}
      >
        <Stack>
          <Typography
            variant="globalS"
            fontWeight="fontWeightBold"
            sx={{ textTransform: 'uppercase', pb: 13 }}
          >
            {t(`common.completion_certificate`)}
          </Typography>
          <Stack sx={{ gap: 1 }}>
            <Typography variant="globalXS">
              {t(`path.certificate.preview.to`)}
            </Typography>
            <Typography
              variant="h3"
              fontWeight="fontWeightBold"
            >
              {getFullname(user ?? {})}
            </Typography>
          </Stack>
        </Stack>
        <Stack
          sx={{
            width: '100%',
            height: '40px',
            flexDirection: 'row',
            justifyContent: 'flex-start',
            alignItems: 'center',
            '& img': { height: '100%' },
          }}
        >
          <img src={instance?.logo} />
        </Stack>
      </Stack>
      <Stack
        sx={{
          width: '60%',
          height: '100%',
          p: 7,
          backgroundImage: `url(${certificateBg})`,
          backgroundSize: 'cover',
        }}
      >
        <Stack>
          <Stack
            sx={{
              width: '100%',
              height: '21px',
              flexDirection: 'row',
              justifyContent: 'flex-end',
              alignItems: 'center',
              '& img': { height: '100%' },
            }}
          >
            <img src={humandLogo} />
          </Stack>
          <Stack sx={{ pt: 13, gap: 2 }}>
            <Stack sx={{ gap: 1 }}>
              <Typography variant="globalXS">
                {t(`path.certificate.preview.for`)}
              </Typography>
              <Typography
                variant="h2"
                fontWeight="fontWeightBold"
                sx={{
                  color: theme => theme.palette.text.secondary,
                  fontSize: theme => theme.typography.pxToRem(32),
                }}
              >
                {`"${title ?? '-'}"`}
              </Typography>
            </Stack>
            <Typography variant="globalXS">
              {t(`path.certificate.preview.date`, { date })}
            </Typography>
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default CertificateModel;