import {
  IconHeart,
  IconList,
  IconStopwatch,
  IconTargetArrow,
  IconTextSpellcheck,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuAlert from '@material-hu/components/design-system/Alert';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuTitle from '@material-hu/components/design-system/Title';

import StarsCover from 'src/pages/dashboard/learning/components/StarsCover';
import { type EvaluationTask } from 'src/pages/dashboard/learning/courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TaskDetail from '../TaskDetail';

const DETAILS_MAX_WIDTH = 469;

type EvaluationStartProps = {
  task: EvaluationTask | undefined;
};

const EvaluationStart = ({ task }: EvaluationStartProps) => {
  const { t } = useLokaliseTranslation(['learning', 'general']);
  const { spacing, palette } = useTheme();

  if (!task) return null;

  const visibleItems = [
    {
      icon: IconTextSpellcheck,
      label: t('common.minimum_passing_percentage'),
      value: `${task.passingGrade}%`,
      visible: task.passingGrade,
    },
    {
      icon: IconList,
      label: t('common.questions_amount', { count: task.questionAmount }),
      value: task.questionAmount || 0,
      visible: true,
    },
    {
      icon: IconStopwatch,
      label: t('common.time_limit'),
      value: `${task.duration} ${t('general:minute', { count: task.duration })}`,
      visible: task.duration,
    },
    {
      icon: IconHeart,
      label: t('common.attempts_amount'),
      value: `${task.attempts || 0}/${task.maximumAttempts}`,
      visible: task.maximumAttempts,
    },
  ].filter(i => i.visible);

  const showAlert = !!task.duration && !!task.maximumAttempts;

  return (
    <>
      <TaskDetail task={task} />
      <HuCardContainer fullWidth>
        <Stack
          sx={{
            position: 'relative',
            alignItems: 'center',
            my: 2,
          }}
        >
          <StarsCover
            strongColor={palette.new.icon.feedback.highlight}
            lightColor={palette.new.border.states.secondary}
          />
          <IconTargetArrow
            size={90}
            color={palette.new.icon.feedback.highlight}
            style={{
              position: 'absolute',
              margin: 'auto',
              left: 0,
              right: 0,
              top: 80,
            }}
          />
        </Stack>
        <HuTitle
          variant="S"
          title={t('course.lesson.evaluation_start')}
          centered
        />
        <Stack
          sx={{
            width: '100%',
            my: 4,
            flexDirection: 'row',
            flexWrap: 'wrap',
            gap: spacing(2),
            maxWidth: visibleItems.length < 4 ? '100%' : DETAILS_MAX_WIDTH,
            justifyContent: 'center',
            mx: 'auto',
            '& > .MuiStack-root': {
              width:
                visibleItems.length < 4
                  ? 'fit-content'
                  : `calc((${DETAILS_MAX_WIDTH}px / 2) - ${spacing(2)})`,
            },
          }}
        >
          {visibleItems.map(item => (
            <HuListItem
              key={item.label}
              sx={{
                '& li': {
                  p: 0,
                  '& .MuiStack-root:first-of-type': {
                    alignItems: 'flex-start',
                    '& .MuiStack-root': {
                      width: 'auto',
                    },
                  },
                },
                '& .MuiAvatar-root': {
                  backgroundColor: palette.new.background.elements.grey,
                  color: palette.new.icon.neutral.default,
                },
              }}
              text={{
                title: item.value,
                description: item.label,
              }}
              avatar={{ Icon: item.icon }}
            />
          ))}
        </Stack>
      </HuCardContainer>
      {showAlert && (
        <HuAlert
          title={t('course.lesson.evaluation.start.title')}
          description={t('course.lesson.evaluation.start.description')}
          severity="info"
        />
      )}
    </>
  );
};

export default EvaluationStart;