import { useWatch } from 'react-hook-form';
import { type TFunction, Trans } from 'react-i18next';

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 { useLokaliseTranslation } from 'src/utils/i18n';
import { formatTextDate } from 'src/utils/timeUtils';
import { getFullname } from 'src/utils/userUtils';

import { newCourseFields } from '../forms';

export const CertificateModal = () => {
  const { t } = useLokaliseTranslation('learning');
  const { user, instance } = useAuth();
  const title = useWatch({ name: newCourseFields.basicInformation.title() });
  const date = formatTextDate(new Date());

  return (
    <Stack
      sx={{
        width: '1017px',
        height: '681.55px',
        flexDirection: 'row',
      }}
    >
      <Stack
        sx={{
          width: '447.27px',
          height: '100%',
          p: '56.8px',
          justifyContent: 'space-between',
        }}
      >
        <Stack
          sx={{
            width: '100%',
            gap: '110.93px',
            color: '#384250',
          }}
        >
          <Typography
            sx={{
              fontSize: '15.97px',
              fontWeight: '700',
              lineHeight: '19.17px',
              textTransform: 'uppercase',
            }}
          >
            {t('common.certificate')}
          </Typography>
          <Stack sx={{ gap: '14.2px' }}>
            <Typography
              sx={{
                fontSize: '14.2px',
                lineHeight: '21.3px',
              }}
            >
              {t('course.certificate.preview.to')}
            </Typography>
            <Typography
              sx={{
                fontSize: '42.6px',
                fontWeight: '700',
                lineHeight: '51.12px',
              }}
            >
              {getFullname(user ?? {})}
            </Typography>
          </Stack>
        </Stack>
        <Stack
          sx={{
            width: '100%',
            height: '39.05px',
            flexDirection: 'row',
            justifyContent: 'flex-start',
            alignItems: 'center',
            '& img': {
              height: '100%',
            },
          }}
        >
          <img src={instance?.logo ?? ''} />
        </Stack>
      </Stack>
      <Stack
        sx={{
          width: '569.73px',
          height: '100%',
          p: '56.8px',
          backgroundImage: `url(${certificateBg})`,
          backgroundSize: 'cover',
        }}
      >
        <Stack
          sx={{
            width: '100%',
            gap: '110.93px',
            color: '#384250',
          }}
        >
          <Stack
            sx={{
              width: '100%',
              height: '20.41px',
              flexDirection: 'row',
              justifyContent: 'flex-end',
              alignItems: 'center',
              '& img': {
                height: '100%',
              },
            }}
          >
            <img src={humandLogo} />
          </Stack>
          <Stack sx={{ gap: '21.3px' }}>
            <Stack sx={{ gap: '14.2px' }}>
              <Typography
                sx={{
                  fontSize: '14.2px',
                  lineHeight: '21.3px',
                }}
              >
                {t('course.certificate.preview.for')}
              </Typography>
              <Typography
                sx={{
                  fontSize: '42.6px',
                  fontWeight: '700',
                  lineHeight: '51.12px',
                  color: '#6C737F',
                }}
              >
                {title}
              </Typography>
            </Stack>
            <Typography sx={{ fontSize: '14.2px', lineHeight: '21.3px' }}>
              <Trans
                t={t as TFunction}
                i18nKey={t('course.certificate.preview.date', { date })}
                components={{
                  strong: (
                    <Typography
                      component="span"
                      sx={{
                        fontSize: '14.2px',
                        lineHeight: '22.29px',
                        fontWeight: '500',
                      }}
                    />
                  ),
                }}
              />
            </Typography>
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default CertificateModal;
