import { IconDownload } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { TASKS_ICONS } from '@material-hu/components/composed-components/learning';
import HuSeeMoreText from '@material-hu/components/composed-components/SeeMoreText';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type Task } from '../../types';

type TaskDetailProps = {
  task: Task | undefined;
  hide?: boolean;
};

const TaskDetail = ({ task, hide }: TaskDetailProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');

  if (!task || hide) return null;

  const TypeIcon = TASKS_ICONS[task.type];
  const attachmentsLength = task.attachments?.length || 0;
  const hasAttachments = attachmentsLength > 0;

  return (
    <HuCardContainer
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
        },
      }}
    >
      <Stack sx={{ gap: 0.5 }}>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 0.5,
          }}
        >
          <TypeIcon
            size={16}
            color={palette.new.icon.neutral.lighter}
          />
          <Typography
            variant="globalXXS"
            sx={{ color: palette.new.text.neutral.lighter }}
          >
            {t(`course.lesson.type.${task.type}`).toUpperCase()}
          </Typography>
        </Stack>
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {task.title}
        </Typography>
      </Stack>
      {!!task.description && (
        <Stack>
          <HuSeeMoreText
            lines={5}
            isHtmlText
            text={task.description}
          />
        </Stack>
      )}
      {hasAttachments && (
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 0.5,
          }}
        >
          <IconDownload
            size={16}
            color={palette.new.icon.neutral.lighter}
          />
          <Typography
            variant="globalXS"
            sx={{ color: palette.new.text.neutral.lighter }}
          >
            {t('common.supplementary_content')}: {attachmentsLength}
          </Typography>
        </Stack>
      )}
    </HuCardContainer>
  );
};

export default TaskDetail;