import { useFormContext, useWatch } from 'react-hook-form';

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

import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { getEvaluationScore } from 'src/pages/dashboard/Learning/Courses/New/utils';
import {
  type Selected,
  type StepsTypes,
} from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type TotalScoreProps = {
  selected: Selected;
};

export const TotalScore = ({ selected }: TotalScoreProps) => {
  const theme = useTheme();
  const { control } = useFormContext<StepsTypes>();
  const { t } = useLokaliseTranslation('learning');

  const questions = useWatch({
    name: newCourseFields.content.modules.tasks.form.questions.all(
      selected.module,
      selected.task,
    ),
    control,
  });

  const totalScore = getEvaluationScore(questions);

  return (
    <Paper
      elevation={0}
      sx={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        gap: 1,
        p: 2,
        backgroundColor: '#F5F7FF',
      }}
    >
      <Typography variant="body1">{t('general:total_score')}</Typography>
      <Stack
        sx={{
          p: 2,
          borderRadius: 0.5,
          border: '1px solid #0000003B',
          backgroundColor: alpha(theme.palette.text.primary, 0.04),
          minWidth: '40px',
          height: '40px',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography
          variant="body1"
          sx={{ color: theme.palette.text.secondary }}
        >
          {totalScore}
        </Typography>
      </Stack>
    </Paper>
  );
};

export default TotalScore;
