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

import Accorion from '@material-hu/components/design-system/Accordion';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import Title from '@material-hu/components/design-system/Title';

import { HUGO_TASKS_ICONS } from 'src/pages/dashboard/Learning/Courses/New/constants';
import { type CourseDetail as CourseDetailType } from 'src/pages/dashboard/Learning/Courses/types';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type CourseContentProps = {
  course: CourseDetailType | undefined;
  loading?: boolean;
};

export const CourseContent = ({
  course,
  loading = false,
}: CourseContentProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { spacing } = useTheme();

  return (
    <LearningCard color="grey">
      {loading && <Skeleton sx={{ width: 80, height: 17 }} />}
      {!loading && (
        <Title
          variant="M"
          title={t('common.content')}
        />
      )}
      {loading &&
        Array.from({ length: 4 }, (_, index) => (
          <Stack
            key={index}
            sx={{
              gap: 2,
              backgroundColor: 'white',
              borderRadius: 2,
            }}
          >
            <ListItem loading />
          </Stack>
        ))}
      {!loading &&
        course?.modules?.map(module => (
          <Accorion
            key={module.id}
            elevation={1}
            title={module.title}
            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: spacing(2.5),
                  maxHeight: spacing(2.5),
                },
              },
            }}
            customDetail={
              <Stack sx={{ gap: 2 }}>
                {module.tasks.map(task => (
                  <ListItem
                    key={task.id}
                    avatar={{ Icon: HUGO_TASKS_ICONS[task.type] }}
                    text={{ title: task.title }}
                    sx={{ '& .MuiListItem-root': { p: 0 } }}
                  />
                ))}
              </Stack>
            }
          />
        ))}
    </LearningCard>
  );
};
