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

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

import useGetDocument from 'src/pages/dashboard/documents/hooks/useGetDocument';
import { sizeToBytes } from 'src/utils/bytes';

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

type CompletedDocumentSlotProps = {
  documentName: string;
  uploadedFile: UploadedDocumentInfo;
};

export const CompletedDocumentSlot = ({
  documentName,
  uploadedFile,
}: CompletedDocumentSlotProps) => {
  const {
    data: document,
    isLoading,
    isError,
  } = useGetDocument({
    documentId: String(uploadedFile.documentId),
  });

  return (
    <Stack sx={{ gap: 1 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
      >
        {documentName}
      </Typography>
      {isLoading && (
        <Skeleton
          variant="rectangular"
          height={56}
          sx={{ borderRadius: 2 }}
        />
      )}
      {!isLoading && (
        <FileCard
          status="success"
          attachment={{
            name: uploadedFile.documentName,
            size: uploadedFile.size,
            bytes: sizeToBytes(uploadedFile.size),
            type: uploadedFile.documentName.split('.').pop() ?? '',
            url: document?.source ?? '',
          }}
          showDownloadButton={!isError && !!document}
          readOnly
          sx={{
            width: '100%',
            '& .MuiCardContent-root': {
              backgroundColor: ({ palette }) =>
                palette.new.background.layout.tertiary,
            },
          }}
        />
      )}
    </Stack>
  );
};
