import type { FC } from 'react';

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

import { ScormState, ScormScoreType } from 'src/types/scorm';

export type CourseProgressProps = {
  state: ScormState;
};

const CourseProgress: FC<CourseProgressProps> = props => {
  const { state } = props;

  const scoreValue = state.score / 10;

  return (
    <Box
      sx={{
        position: 'relative',
        display: 'inline-flex',
      }}
    >
      <CircularProgress
        variant="determinate"
        value={state?.score}
        sx={{
          width: '36px !important',
          height: '30px !important',
        }}
        color={
          state.registrationSuccess === ScormScoreType.PASSED
            ? 'success'
            : 'error'
        }
      />
      <Stack
        sx={{
          flexDirection: 'row',
          top: 0,
          left: 4,
          bottom: 0,
          right: 0,
          position: 'absolute',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography
          variant="caption"
          sx={{
            fontSize: '10px',
            fontWeight: 600,
          }}
        >
          {`${scoreValue}/10`}
        </Typography>
      </Stack>
    </Box>
  );
};

export default CourseProgress;