import { useState, useRef, useMemo } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import ReactCrop from 'react-image-crop';

import 'react-image-crop/dist/ReactCrop.css';

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

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

import { SignaturePosition } from 'src/types/documents';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CircularProgress from 'src/components/CircularProgress';

type Props = {
  name: string;
  file?: File;
  sx?: SxProps;
};

const FormPDFSelection = ({ name, file, sx }: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');
  const ref = useRef<any>();
  const theme = useTheme();
  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));

  const { control, getValues } = useFormContext();

  const [pagesCount, setPagesCount] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [images, setImages] = useState<string[]>([]);
  const [height, setHeight] = useState<number>(0);
  const [cropData, setCropData] = useState<SignaturePosition>({
    crop: getValues(name)?.crop,
    page: 1,
  }); // we need this useState because using the form state is too slow

  if (!file) {
    return null;
  }

  const handleLoadSuccess = (pdf: any) => setPagesCount(pdf.numPages);

  const width = isMdUp ? 700 : 300;

  const handleRenderSuccess = (page: any) => {
    const image = ref.current.toDataURL('image/png');
    // new array to avoid state mutation
    const newImages = [...images];
    newImages[pageNumber] = image;
    setImages(newImages);

    // 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 currentImage = images[pageNumber];

  const pdfUrl = useMemo(() => {
    if (!file) return null;

    const blob = new Blob([file], { type: 'application/pdf' });
    return URL.createObjectURL(blob);
  }, [file]);

  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => (
        <Box sx={sx}>
          <Typography>
            {t('backoffice_only:form_pdf_selection.select_location')}
          </Typography>
          <Box sx={{ borderStyle: 'solid', width }}>
            {!currentImage ? (
              <Document
                file={pdfUrl}
                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>
            ) : (
              <ReactCrop
                crop={pageNumber === cropData.page ? cropData.crop : undefined}
                onChange={(crop, percentCrop) =>
                  setCropData({
                    page: pageNumber,
                    crop: percentCrop,
                  })
                }
                onDragEnd={() => field.onChange(cropData)}
                minHeight={height * 0.015}
                minWidth={width * 0.015}
              >
                <img
                  src={currentImage}
                  alt=""
                  width={width}
                />
              </ReactCrop>
            )}
          </Box>
          <Stack
            direction="row"
            sx={{
              alignItems: 'center',
              justifyContent: 'center',
              maxWidth: width,
            }}
          >
            <IconButton
              title={t('backoffice_only:form_pdf_selection.prev_page')}
              size="small"
              onClick={decreasePage}
              disabled={pageNumber === 1}
            >
              <ArrowBackIcon color="secondary" />
            </IconButton>
            <Typography
              color="textSecondary"
              variant="subtitle2"
            >
              {t('backoffice_only:form_pdf_selection.page', {
                pageNumber,
                pagesCount,
              })}
            </Typography>
            <IconButton
              title={t('backoffice_only:form_pdf_selection.next_page')}
              size="small"
              onClick={increasePage}
              disabled={pageNumber === pagesCount}
            >
              <ArrowForwardIcon color="secondary" />
            </IconButton>
          </Stack>
        </Box>
      )}
    />
  );
};

export default FormPDFSelection;