import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { type Attachment } from '@material-hu/types/attachments';

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

import {
  type ResponseRequestTimeOff,
  VacationStatus,
} from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getCorrectState } from 'src/utils/vacations';

import DropZoneVacations from '../inputs/DropZoneVacations';

type Props = {
  isManagerView: boolean;
  requestId: number;
  vacationDetail: ResponseRequestTimeOff;
};

const RequestDetailUploader = ({
  isManagerView,
  requestId,
  vacationDetail,
}: Props) => {
  const { t } = useLokaliseTranslation('time_off');
  const statusState =
    isManagerView && vacationDetail
      ? getCorrectState(vacationDetail)
      : vacationDetail?.state;

  const requestIsRejectedOrCancelled =
    statusState === VacationStatus.REJECTED ||
    statusState === VacationStatus.CANCELLED;

  const showFileCards =
    vacationDetail?.attachments?.length > 0 &&
    (isManagerView || requestIsRejectedOrCancelled);

  const isAllowedToUploadFiles =
    !requestIsRejectedOrCancelled && !isManagerView;

  const requestFiles = vacationDetail?.attachments;

  return (
    <Stack>
      {showFileCards && (
        <CardContainer
          color="grey"
          fullWidth
        >
          <Stack sx={{ gap: 1 }}>
            <Stack>
              <Typography
                variant="globalS"
                sx={{
                  fontWeight: 'fontWeightSemiBold',
                }}
              >
                {t('documentation')}
              </Typography>
              <Typography
                variant="globalXS"
                sx={{
                  color: theme => theme.palette.new.text.neutral.lighter,
                }}
              >
                {vacationDetail?.policyType?.attachmentInstructions}
              </Typography>
            </Stack>
            {requestFiles?.map(attachment => (
              <HuFileCard
                sx={{
                  width: '100%',
                  '& .MuiTypography-root': {
                    maxWidth: 300,
                  },
                }}
                key={attachment.id}
                attachment={attachment as Attachment}
                status="default"
              />
            ))}
          </Stack>
        </CardContainer>
      )}
      {isAllowedToUploadFiles && (
        <DropZoneVacations
          name="files"
          isManagerView={isManagerView}
          requestId={requestId}
          requestState={vacationDetail?.state}
          uploadFiles
          policyTypeId={vacationDetail.policyType.id}
          requestAttachments={vacationDetail.attachments}
        />
      )}
    </Stack>
  );
};

export default RequestDetailUploader;