import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

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

import { getFileExtensionIcon } from '../../utils';

import TaskSupplementarySideContent from './TaskSupplementarySideContent';

const TaskSupplementaryContent = ({ task }: { task: Task | undefined }) => {
  const { t } = useLokaliseTranslation(['learning', 'general']);

  if (!task || !task.attachments?.length) return null;

  const attachments = task.attachments;

  return (
    <>
      <Divider />
      <Stack sx={{ gap: 2 }}>
        <Typography
          variant="globalXS"
          color={({ palette }) => palette.new.text.neutral.disabled}
          fontWeight="fontWeightSemiBold"
        >
          {t('common.supplementary_content')}
        </Typography>
        <Stack sx={{ width: '100%', gap: 1 }}>
          {attachments.map(attachment => (
            <HuCardContainer
              key={attachment.id}
              padding={0}
              sx={{ width: '100%' }}
            >
              <HuListItem
                text={{ title: attachment.name, description: attachment.size }}
                sx={{
                  '& svg': {
                    color: ({ palette }) => palette.new.icon.neutral.default,
                  },
                }}
                avatar={{
                  Icon: getFileExtensionIcon(
                    attachment.type,
                    attachment.name || '',
                  ),
                }}
                slotProps={{
                  avatar: {
                    sx: {
                      backgroundColor: ({ palette }) =>
                        palette.new.background.elements.grey,
                    },
                  },
                }}
                sideContent={
                  <TaskSupplementarySideContent attachment={attachment} />
                }
              />
            </HuCardContainer>
          ))}
        </Stack>
      </Stack>
    </>
  );
};

export default TaskSupplementaryContent;