import type { FC } from 'react';
import { useMutation } from 'react-query';
import { useNavigate } from 'react-router-dom';

import SchoolOutlinedIcon from '@material-hu/icons/material/SchoolOutlined';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { statusStyle } from 'src/constants/scorm';
import { useAuth } from 'src/contexts/JWTContext';
import CourseProgress from 'src/pages/dashboard/scorm/components/CourseProgress';
import { useTranslation } from 'src/pages/dashboard/scorm/i18n';
import { scormRoutes } from 'src/pages/dashboard/scorm/routes';
import { courseRegistration } from 'src/services/scorm';
import {
  ScormProgressType,
  ScormState,
  ScormRegistration,
  ScormScoreType,
} from 'src/types/scorm';
import { formatCourseRegistrationData } from 'src/utils/scorm';

export type ScormCardProps = {
  id: string;
  folderName: string;
  title: string;
  state?: ScormState;
};

const ScormCard: FC<ScormCardProps> = props => {
  const { id, folderName, title, state } = props;

  const navigate = useNavigate();
  const { t } = useTranslation();
  const { user } = useAuth();
  const theme = useTheme();

  const handleNavigateScormPlayer = () => {
    const registrationId = `${id}-${user.id}`;
    navigate(scormRoutes.player(id, registrationId, folderName));
  };

  const { mutate } = useMutation(
    (body: ScormRegistration) => courseRegistration(body),
    {
      onSuccess: () => {
        handleNavigateScormPlayer();
      },
    },
  );

  const handleOnClick = async () => {
    if (!state) {
      const body = formatCourseRegistrationData(id, user);
      mutate(body);
    } else {
      handleNavigateScormPlayer();
    }
  };

  const scormState = state
    ? state.registrationCompletion
    : ScormProgressType.UNKNOWN;

  const hasStateNote =
    state &&
    (state.registrationSuccess === ScormScoreType.PASSED ||
      state.registrationSuccess === ScormScoreType.FAILED);

  return (
    <Card
      sx={{
        borderRadius: '10px',
        height: '190px',
        width: '300px',
        boxShadow: theme.shadows[2],
        cursor: 'pointer',
      }}
      onClick={handleOnClick}
    >
      <Stack
        sx={{
          justifyContent: 'center',
          alignItems: 'center',
          height: '80px',
          width: '100%',
          backgroundColor: '#F8F9FA',
        }}
      >
        <SchoolOutlinedIcon
          sx={{
            width: '56px',
            height: '56px',
            color: '#9E77ED',
          }}
        />
      </Stack>
      <CardContent
        sx={{
          flex: '1 0 auto',
          px: 3,
          pt: 2.5,
          width: '100%',
          height: '110px',
        }}
      >
        <Stack>
          <Typography
            variant="subtitle1"
            sx={{
              lineHeight: '1.2em',
              height: '2.4em',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical',
              mb: 2,
            }}
          >
            {title}
          </Typography>
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Typography
              variant="overline"
              sx={{
                ...statusStyle[scormState],
                width: 'fit-content',
                borderRadius: '100px',
                px: 2,
                py: 0,
                height: 'fit-content',
                fontSize: '10px',
              }}
            >
              {t(scormState).toUpperCase()}
            </Typography>
            {state?.score && <CourseProgress state={state} />}
            {!state?.score && hasStateNote && (
              <Typography
                variant="caption"
                sx={{
                  color:
                    state.registrationSuccess === ScormScoreType.PASSED
                      ? '#4CAF50'
                      : '#F44336',
                }}
              >
                {t(state.registrationSuccess)}
              </Typography>
            )}
          </Stack>
        </Stack>
      </CardContent>
    </Card>
  );
};

export default ScormCard;
