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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import FileCard from '@material-hu/components/design-system/FileCard';

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

import { Asset } from '../../../types';

type TaskAttachmentsProps = {
  attachments: Asset[];
};

export const TaskAttachments = ({ attachments }: TaskAttachmentsProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');

  if (!attachments.length) return null;

  return (
    <CardContainer
      fullWidth
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        },
      }}
    >
      <Typography fontWeight="fontWeightSemiBold">
        {t('custom_task_detail.attached_files')}
      </Typography>
      <Stack sx={{ width: '100%', gap: 1 }}>
        {attachments.map(attachment => (
          <FileCard
            key={attachment.url}
            status="default"
            sx={{
              width: '100%',
              '& .MuiCardContent-root': {
                backgroundColor: ({ palette }) =>
                  palette.new.background.layout.tertiary,
              },
            }}
            attachment={{ ...attachment, bytes: sizeToBytes(attachment.size) }}
          />
        ))}
      </Stack>
    </CardContainer>
  );
};