import { FC, useEffect, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useMutation } from 'react-query';
import { useParams, useNavigate } from 'react-router';

import CloseIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Container from '@material-hu/mui/Container';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import lessonIcon from 'src/assets/svg/lessonIcon.svg';
import { useMobileLayout } from 'src/hooks/useMobileLayout';
import useNewTheme from 'src/hooks/useNewTheme';
import ScormIframe from 'src/pages/dashboard/learning/courses/Tasks/components/ScormIframe';
import { useTranslation } from 'src/pages/dashboard/scorm/i18n';
import { scormRoutes } from 'src/pages/dashboard/scorm/routes';
import { getCourseLink, getCourse } from 'src/services/scorm';
import { ScormLaunchLink } from 'src/types/scorm';
import { isIOS } from 'src/utils/recognitions';

const ScormPlayer: FC = () => {
  const { courseId, registrationId, folderName } = useParams();
  const { t } = useTranslation();
  const navigate = useNavigate();
  const NewThemeProvider = useNewTheme();
  const [courseLink, setCourseLink] = useState<string | null>(null);
  const [courseTitle, setCourseTitle] = useState<string | null>(null);
  useMobileLayout();

  const { mutate, isLoading } = useMutation(
    (body: ScormLaunchLink) => getCourseLink(registrationId, body),
    {
      onSuccess: async response => {
        const courseData = await getCourse(courseId);
        setCourseTitle(courseData.data.title);
        setCourseLink(response.data.launchLink);
      },
    },
  );

  useEffect(() => {
    const body = {
      expiry: 300,
      redirectOnExitUrl: 'closer',
    };
    mutate(body);
  }, [registrationId]);

  const handleExit = () => navigate(scormRoutes.all());

  return (
    <NewThemeProvider>
      <Helmet>
        <title>{t('SCORM_PLAYER')}</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          minHeight: '100%',
        }}
      >
        <Container
          sx={{
            maxWidth: '1100px !important',
            px: 0,
            py: 2.4,
          }}
        >
          {isLoading && (
            <Stack
              sx={{
                flexDirection: 'row',
                width: '100%',
                mt: 4,
                justifyContent: 'center',
              }}
            >
              <CircularProgress />
            </Stack>
          )}
          {!isLoading && (
            <Stack sx={{ gap: 3 }}>
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <IconButton onClick={handleExit}>
                  <CloseIcon sx={{ width: '20px', height: '20px' }} />
                </IconButton>
                <Typography
                  variant="h5"
                  sx={{ pl: 1, fontSize: '20px' }}
                >
                  {folderName}
                </Typography>
              </Stack>
              {courseLink && !isIOS() && (
                <Stack
                  sx={{
                    px: '16%',
                    pt: 4,
                  }}
                >
                  <Stack
                    sx={{
                      flexDirection: 'row',
                      gap: 2,
                    }}
                  >
                    <img
                      alt="lesson"
                      src={lessonIcon}
                      style={{
                        width: '20px',
                        height: '20px',
                      }}
                    />
                    <Typography
                      variant="h6"
                      color="secondary"
                    >
                      {courseTitle}
                    </Typography>
                  </Stack>
                  <Divider
                    sx={{
                      mt: 2,
                      mb: 3,
                    }}
                  />
                  <ScormIframe src={courseLink} />
                </Stack>
              )}
              {courseLink && isIOS() && (
                <Stack sx={{ mt: 3, width: '100%', alignItems: 'center' }}>
                  <Button
                    component="a"
                    href={courseLink}
                    variant="contained"
                    color="primary"
                    id="scorm-link"
                  >
                    {t('PLAY')}
                  </Button>
                </Stack>
              )}
            </Stack>
          )}
        </Container>
      </Box>
    </NewThemeProvider>
  );
};

export default ScormPlayer;