import { useFormContext } from 'react-hook-form';
import { type TFunction, Trans } from 'react-i18next';
import { useMatch } from 'react-router-dom';

import Close from '@material-hu/icons/material/Close';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import useSnackbarUtils from '@material-hu/components/deprecated/Snackbar';
import Button from '@material-hu/components/design-system/Buttons/Button';

import Cover from 'src/assets/premium-lesson.webp';
import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { getCourseFunnel } from 'src/pages/dashboard/Learning/Courses/New/utils';
import { coursesRoutes } from 'src/pages/dashboard/Learning/Courses/routes';
import { type TaskTypes } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

export type PremiumModalProps = {
  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
  type: TaskTypes;
};

export const PremiumModal = ({ onClose, type }: PremiumModalProps) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('learning');
  const { showSnackbar } = useSnackbarUtils();
  const { getValues } = useFormContext();

  const isEdit = !!useMatch(coursesRoutes.editCourse());
  const isDuplicate = !!useMatch(coursesRoutes.duplicateCourse());

  const handleAccept = (event: React.MouseEvent<HTMLButtonElement>) => {
    onClose(event);

    const courseName = getValues(newCourseFields.basicInformation.title());

    logEvent(LogEvents.COURSE_LESSON_INTERESTED, {
      courseName,
      taskType: type,
      courseFunnel: getCourseFunnel(isEdit, isDuplicate),
    });

    showSnackbar(t('course.lesson.premium.accepted'));
  };

  return (
    <>
      <Stack
        component={DialogTitle}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Typography
          variant="h6"
          component="span"
        >
          {t('course.lesson.premium.title')}
        </Typography>
        <IconButton
          onClick={onClose}
          arial-label={t('general:close')}
        >
          <Close />
        </IconButton>
      </Stack>
      <Stack
        component={DialogContent}
        sx={{ p: 3, gap: 3 }}
      >
        <Stack
          component="img"
          src={Cover}
          sx={{
            width: '100%',
            borderRadius: theme.spacing(1),
            height: '300px',
            objectFit: 'cover',
          }}
        />
        <Typography variant="body1">
          <Trans
            i18nKey={t('course.lesson.premium.description')}
            t={t as TFunction}
            components={{
              br: (
                <>
                  <br />
                  <br />
                </>
              ),
              strong: (
                <Typography
                  variant="subtitle1"
                  component="span"
                  sx={{ ml: 0.5 }}
                />
              ),
            }}
          />
        </Typography>
      </Stack>
      <DialogActions
        sx={{
          p: 3,
          pt: 0,
          gap: 3,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        <Button
          onClick={onClose}
          variant="text"
          fullWidth
        >
          {t('general:close')}
        </Button>
        <Button
          onClick={handleAccept}
          variant="contained"
          fullWidth
        >
          {t('general:me_interested')}
        </Button>
      </DialogActions>
    </>
  );
};

export default PremiumModal;
