import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import DonutChart from '@material-hu/components/design-system/Charts/DonutChart';
import HuTitle from '@material-hu/components/design-system/Title';

import {
  DONUT_CHART_BORDERLESS_DATASET,
  DONUT_CHART_SIZE,
} from 'src/pages/dashboard/learning/courses/constants';
import { type Course } from 'src/pages/dashboard/learning/courses/types';
import {
  getDonutChartColors,
  getTaskCount,
  isPendingSignature,
  showCertificate,
} from 'src/pages/dashboard/learning/courses/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CourseCertificate from './CourseCertificate';
import PendingSignatureAlert from './PendingSignatureAlert';

const CourseProgress = ({ course }: { course: Course }) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');

  const taskCount = getTaskCount(course);
  const completedTaskCount = getTaskCount(course, true);
  const formattedProgress = Number(course.progress).toFixed(0);
  const chartColors = getDonutChartColors(palette);

  return (
    <Stack sx={{ gap: 2, mt: 4.5, minWidth: 385 }}>
      {isPendingSignature(course) && (
        <PendingSignatureAlert courseId={course.id} />
      )}
      <HuCardContainer
        fullWidth
        sx={{ justifyContent: 'center', display: 'flex' }}
      >
        <Stack
          sx={{
            width: DONUT_CHART_SIZE,
            height: DONUT_CHART_SIZE,
            mb: 2,
            position: 'relative',
            mx: 'auto',
          }}
        >
          <DonutChart
            type="doughnut"
            data={{
              datasets: [
                {
                  data: [course.progress, 100 - course.progress],
                  backgroundColor: [chartColors.fill, chartColors.track],
                  ...DONUT_CHART_BORDERLESS_DATASET,
                },
              ],
            }}
            options={{
              maintainAspectRatio: false,
              events: [],
              plugins: {
                legend: { display: false },
                tooltip: { enabled: false },
              },
            }}
          />
          <Typography
            sx={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              color: palette.new.text.neutral.default,
            }}
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {formattedProgress}%
          </Typography>
        </Stack>
        <HuTitle
          title={t('course.lesson.finished_lessons')}
          copetin={t('common.progress').toUpperCase()}
          centered
          description={`${completedTaskCount}/${taskCount}`}
          variant="M"
        />
        {showCertificate(course) && <CourseCertificate course={course} />}
      </HuCardContainer>
    </Stack>
  );
};

export default CourseProgress;
