import { type TFunction, Trans } from 'react-i18next';

import { IconThumbDown, IconThumbUp } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import DonutChart from '@material-hu/components/design-system/Charts/DonutChart';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
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 EvaluationTask,
  TaskStatus,
} from 'src/pages/dashboard/learning/courses/types';
import { getEvaluationDonutChartTrackColor } from 'src/pages/dashboard/learning/courses/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import roundDecimals from 'src/utils/roundDecimals';

export type TaskEvaluationProgressProps = {
  task: EvaluationTask | undefined;
};

const TaskEvaluationProgress = ({ task }: TaskEvaluationProgressProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');

  if (!task) return null;

  const {
    passingGrade,
    status,
    grade,
    correctAnswerAmount,
    wrongAnswerAmount,
  } = task;

  const progress = roundDecimals(grade, 0);

  const getResultInfo = () => {
    if (!passingGrade) {
      return {
        color: palette.new.graphics.brand[400],
        title: t('course.lesson.results.no_passing_grade'),
      };
    }

    if (status === TaskStatus.FINISHED_OK) {
      return {
        color: palette.new.graphics.success[600],
        title: t('course.lesson.results.success_with_grade'),
      };
    }

    if (status === TaskStatus.FAILED) {
      return {
        color: palette.new.graphics.warning[500],
        title: t('course.lesson.results.failed'),
      };
    }

    return {
      color: palette.new.graphics.warning[500],
      title: t('course.lesson.results.finished_failed'),
    };
  };

  const getDescription = () => {
    if (!passingGrade || status === TaskStatus.FINISHED_OK) return null;

    return (
      <Trans
        t={t as TFunction}
        i18nKey={t('course.lesson.lesson_result_title', { passingGrade })}
        components={{
          strong: (
            <Typography
              variant="globalXS"
              sx={{ color: palette.new.text.neutral.lighter }}
            />
          ),
        }}
      />
    );
  };

  const { color, title } = getResultInfo();

  const showCorrectFeedback =
    task.status !== TaskStatus.FAILED && task.showCorrectAnswers;

  return (
    <>
      <Stack
        sx={{
          width: DONUT_CHART_SIZE,
          height: DONUT_CHART_SIZE,
          mb: 2,
          position: 'relative',
          alignSelf: 'center',
        }}
      >
        <DonutChart
          type="doughnut"
          data={{
            datasets: [
              {
                data: [progress, 100 - progress],
                backgroundColor: [
                  color,
                  getEvaluationDonutChartTrackColor(palette),
                ],
                ...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"
        >
          {progress}%
        </Typography>
      </Stack>
      <HuTitle
        title={title}
        description={getDescription()}
        centered
        variant="M"
      />
      {showCorrectFeedback && (
        <Stack
          sx={{
            gap: 1,
            width: '100%',
            flexDirection: 'row',
          }}
        >
          <HuListItem
            avatar={{ Icon: IconThumbUp }}
            text={{
              title: correctAnswerAmount || 0,
              description: t('common.correct_answers'),
            }}
            sx={{
              flex: 1,
              backgroundColor: palette.new.background.elements.default,
              borderRadius: 2,
            }}
            slotProps={{
              avatar: {
                sx: {
                  backgroundColor: palette.new.background.elements.grey,
                  color: palette.new.icon.neutral.brand,
                  '& svg': {
                    color: palette.new.icon.neutral.brand,
                    stroke: palette.new.icon.neutral.brand,
                  },
                },
              },
            }}
          />
          <HuListItem
            avatar={{ Icon: IconThumbDown }}
            text={{
              title: wrongAnswerAmount || 0,
              description: t('common.incorrect_answers'),
            }}
            sx={{
              flex: 1,
              backgroundColor: palette.new.background.elements.default,
              borderRadius: 2,
            }}
            slotProps={{
              avatar: {
                sx: {
                  backgroundColor: palette.new.background.elements.grey,
                  color: palette.new.icon.neutral.brand,
                  '& svg': {
                    color: palette.new.icon.neutral.brand,
                    stroke: palette.new.icon.neutral.brand,
                  },
                },
              },
            }}
          />
        </Stack>
      )}
    </>
  );
};

export default TaskEvaluationProgress;
