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

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

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

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

import { CompletedDocumentSlot } from './CompletedDocumentSlot';
import { useDocumentSlotUpload } from './hooks/useDocumentSlotUpload';

const MAX_SIZE_MB = 50;

type DocumentSlotProps = {
  documentName: string;
  slotIndex: number;
  isCompleted: boolean;
  onFileChange: (slotIndex: number, fileAssetId: number | null) => void;
  showError?: boolean;
  uploadedFile?: UploadedDocumentInfo;
};

export const DocumentSlot = ({
  documentName,
  slotIndex,
  isCompleted,
  onFileChange,
  showError,
  uploadedFile,
}: DocumentSlotProps) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { cards, handleUpload, handleChange } = useDocumentSlotUpload({
    slotIndex,
    onFileChange,
  });

  if (isCompleted && uploadedFile) {
    return (
      <CompletedDocumentSlot
        documentName={documentName}
        uploadedFile={uploadedFile}
      />
    );
  }

  return (
    <Stack sx={{ gap: 1 }}>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
      >
        {documentName}
      </Typography>
      <Uploader
        value={cards}
        onChange={handleChange}
        uploadFunction={handleUpload}
        triggerOnChangeWhenUploading
        acceptedTypes={['pdf', 'image']}
        maxFiles={1}
        showUploadButtonOnMaxFiles={false}
        fileSizeLimit={MAX_SIZE_MB * 1024 * 1024}
        disabled={isCompleted}
        readOnly={isCompleted}
        error={showError}
        helperText={
          showError ? t('document_task_detail.file_required') : undefined
        }
        sx={{
          '.MuiStack-root .MuiStack-root:has(input)': {
            backgroundColor: theme.palette.new.background.layout.tertiary,
          },
          '.MuiCardContent-root': {
            backgroundColor: theme.palette.new.background.layout.tertiary,
          },
        }}
      />
    </Stack>
  );
};
