import Stack from '@material-hu/mui/Stack';
import { IconType } from '@material-hu/types/icons';

import HuAccordion from '@material-hu/components/design-system/Accordion';
import HuTitle from '@material-hu/components/design-system/Title';

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

import { getCurrentModule, getModuleFinishedTaskCount } from '../../../utils';

import CourseTask from './CourseTask';

const CourseContent = ({ course }: { course: Course }) => {
  const { t } = useLokaliseTranslation('learning');

  const currentModule = getCurrentModule(course);

  return (
    <Stack sx={{ gap: 1.5, width: '100%' }}>
      <HuTitle
        variant="M"
        title={t('common.content')}
      />
      <Stack sx={{ width: '100%', gap: 2 }}>
        {course.modules.map((module, moduleIndex) => {
          const tasksDone = getModuleFinishedTaskCount(module);

          return (
            <HuAccordion
              elevation={1}
              key={module.id}
              title={module.title}
              description={`${tasksDone} / ${module.tasks.length}`}
              defaultExpanded={currentModule.id === module.id}
              sx={{
                '& .MuiAccordionDetails-root > .MuiStack-root > .MuiStack-root':
                  { p: 0 },
              }}
              avatar={{
                text:
                  module.icon.type === IconType.EMOJI
                    ? module.icon.value
                    : undefined,
                src:
                  module.icon.type === IconType.IMAGE
                    ? module.icon.value
                    : undefined,
                sx: {
                  borderRadius: 1,
                  '& span': {
                    fontSize: '1.3rem',
                    mt: 0.5,
                  },
                  '& img': {
                    maxWidth: theme => theme.spacing(2.5),
                    maxHeight: theme => theme.spacing(2.5),
                  },
                },
              }}
              customDetail={
                <Stack sx={{ pb: 2, gap: 1 }}>
                  {module.tasks.map(task => (
                    <CourseTask
                      key={task.id}
                      task={task}
                      moduleIndex={moduleIndex}
                      course={course}
                    />
                  ))}
                </Stack>
              }
            />
          );
        })}
      </Stack>
    </Stack>
  );
};

export default CourseContent;