/**
 * @Move (SQPD)
 * Only used by the Forms module - move to Forms/
 */
import { useMemo, useRef, useState } from 'react';
import { useQuery } from 'react-query';

import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import ArrowForwardIcon from '@material-hu/icons/material/ArrowForward';
import CloseIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { Document, Page } from 'src/config/react-pdf';

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

import CircularProgress from 'src/components/CircularProgress';
import Scrollbar from 'src/components/Scrollbar';

type Props = {
  closeModal?: () => void;
  showNavigationOnTop?: boolean;
  file: string;
};

const PdfPreviewModal = ({
  closeModal,
  showNavigationOnTop = false,
  file,
}: Props) => {
  const { t } = useLokaliseTranslation('documents');
  const ref = useRef<any>();
  const theme = useTheme();

  const [pagesCount, setPagesCount] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [height, setHeight] = useState(100);

  const docQuery = useQuery(['pdf-preview', file], () =>
    downloadFile(file, 'pdf', false),
  );

  const documentFile = useMemo(() => {
    const urlIsSecure = file?.startsWith('https://secure-files');
    return urlIsSecure
      ? {
          url: file,
          withCredentials: true,
          crossOrigin: 'use-credentials',
        }
      : docQuery?.data;
  }, [docQuery?.data, file]);

  if (!file || docQuery.isLoading || docQuery.isFetching) {
    return <CircularProgress centered />;
  }

  const handleLoadSuccess = (pdf: { numPages: number }) =>
    setPagesCount(pdf.numPages);

  const width = theme.breakpoints.values.sm;

  const handleRenderSuccess = (page: any) => {
    // eslint-disable-next-line no-underscore-dangle
    const pageWidth = page._pageInfo.view[2];
    // eslint-disable-next-line no-underscore-dangle
    const pageHeight = page._pageInfo.view[3];
    setHeight((width / pageWidth) * pageHeight);
  };

  const increasePage = () => setPageNumber(prev => prev + 1);
  const decreasePage = () => setPageNumber(prev => prev - 1);

  const pageNavigator = (
    <Stack
      direction="row"
      sx={{
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <IconButton
        title={t('PREV_PAGE')}
        size="small"
        onClick={decreasePage}
        disabled={pageNumber === 1}
      >
        <ArrowBackIcon color={pageNumber === 1 ? 'disabled' : 'secondary'} />
      </IconButton>
      <Typography
        color="textSecondary"
        variant="subtitle2"
      >
        {t('PAGE', { pageNumber, pagesCount })}
      </Typography>
      <IconButton
        title={t('NEXT_PAGE')}
        size="small"
        onClick={increasePage}
        disabled={pageNumber === pagesCount}
      >
        <ArrowForwardIcon
          color={pageNumber === pagesCount ? 'disabled' : 'secondary'}
        />
      </IconButton>
    </Stack>
  );

  return (
    <>
      {!showNavigationOnTop && (
        <Stack
          direction="row"
          sx={{
            alignItems: 'right',
            justifyContent: 'right',
          }}
        >
          <IconButton onClick={closeModal}>
            <CloseIcon />
          </IconButton>
        </Stack>
      )}
      {showNavigationOnTop && pageNavigator}
      <Scrollbar>
        <Box sx={{ width, mx: 'auto' }}>
          <Document
            file={documentFile}
            onLoadSuccess={handleLoadSuccess}
            loading={
              <Box sx={{ height }}>
                <CircularProgress centered />
              </Box>
            }
          >
            <Page
              renderAnnotationLayer={false}
              pageNumber={pageNumber}
              canvasRef={ref}
              width={width}
              onRenderSuccess={handleRenderSuccess}
              loading={
                <Box sx={{ height }}>
                  <CircularProgress centered />
                </Box>
              }
            />
          </Document>
        </Box>
      </Scrollbar>
      {!showNavigationOnTop && pageNavigator}
    </>
  );
};

export default PdfPreviewModal;