import { useState, useRef } from 'react';
import { useFormContext, Controller } from 'react-hook-form';

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 RegionSelect from 'src/lib/react-region-select/RegionSelect';
import { QUESTION_TYPES } from 'src/pages/dashboard/Forms/Form/components/ContentTab/constants';
import { QuestionInputType } from 'src/types/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CircularProgress from 'src/components/CircularProgress';

type Props = {
  name: string;
  file?: string;
  sx?: SxProps;
  fields: any[];
  setFields: Function;
  pageNumber: number;
  setPageNumber: Function;
  selectField: (index: number) => void;
  moveField: () => void;
};

const FormPDFFields = ({
  name,
  file,
  sx,
  fields,
  setFields,
  pageNumber,
  setPageNumber,
  selectField,
  moveField,
}: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');
  const ref = useRef<any>();
  const theme = useTheme();
  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
  const isLgDown = useMediaQuery(theme.breakpoints.down('lg'));

  const { control } = useFormContext();

  const [pagesCount, setPagesCount] = useState(null);
  const [images, setImages] = useState<string[]>([]);
  const [height, setHeight] = useState(0);

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

  const widthIfLgDown = isLgDown ? 500 : 650;
  const width = isMdUp ? widthIfLgDown : 400;
  const [minHeight, setMinHeight] = useState(0);
  const [minWidth, setMinWidth] = useState(0);
  const [pageWidth, setPageWidth] = useState(1);
  const [pageHeight, setPageHeight] = useState(1);
  const [minSignatureWidth, setMinSignatureWidth] = useState(0);

  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 auxWidth = page._pageInfo.view[2];
    // eslint-disable-next-line no-underscore-dangle
    setPageWidth(page._pageInfo.view[2]);
    // eslint-disable-next-line no-underscore-dangle
    const auxHeight = page._pageInfo.view[3];
    // eslint-disable-next-line no-underscore-dangle
    setPageHeight(page._pageInfo.view[3]);

    setHeight((width / auxWidth) * auxHeight);
    setMinHeight((14 / auxHeight) * 100);
    setMinWidth((16 / auxWidth) * 100);
    setMinSignatureWidth((130 / auxWidth) * 100);
  };

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

  const currentImage = images[pageNumber];

  const regionStyle = {
    backgroundColor: theme.palette.primary.main,
    opacity: 0.7,
    borderRadius: '3px',
  };

  const onChange = (regions: any) => setFields(regions);

  const getIcon = (inputType: QuestionInputType) => {
    if (!inputType) return null;
    const { Icon } = QUESTION_TYPES[inputType as keyof typeof QUESTION_TYPES];
    return <Icon sx={{ color: 'secondary', fontSize: 'medium', ml: 1 }} />;
  };

  const regionRenderer = (regionProps: { isChanging: boolean; data: any }) => {
    if (!regionProps.isChanging) {
      return (
        <div style={{ position: 'absolute', left: '-5px', top: '-20px' }}>
          <Stack
            direction="row"
            alignItems="center"
            onClick={() => selectField(regionProps.data.index)}
          >
            {getIcon(regionProps.data?.type)}
            <Typography
              variant="subtitle2"
              color="black"
              sx={{ userSelect: 'none', fontSize: '10px', ml: '3px' }}
            >
              {t('backoffice_only:form_pdf_fields.question_label', {
                context: regionProps.data?.type,
              })}
            </Typography>
          </Stack>
        </div>
      );
    }
    return null;
  };

  if (!file) {
    return null;
  }

  return (
    <Controller
      control={control}
      name={name}
      render={() => (
        <Box sx={sx}>
          <Stack
            sx={{
              borderBottom: 1,
              minHeight: '7vh',
              borderColor: 'divider',
              backgroundColor: 'background.paper',
            }}
            direction="row"
            alignItems="center"
            justifyContent="center"
            spacing={2}
          >
            <IconButton
              title={t('backoffice_only:form_pdf_fields.prev_page')}
              size="small"
              onClick={decreasePage}
              disabled={pageNumber === 1}
            >
              <ArrowBackIcon
                fontSize="small"
                color={pageNumber === 1 ? 'disabled' : 'secondary'}
              />
            </IconButton>
            <Typography
              color="textSecondary"
              variant="subtitle2"
            >
              {t('backoffice_only:form_pdf_fields.page', {
                pageNumber,
                pagesCount,
              })}
            </Typography>
            <IconButton
              title={t('backoffice_only:form_pdf_fields.next_page')}
              size="small"
              onClick={increasePage}
              disabled={pageNumber === pagesCount}
            >
              <ArrowForwardIcon
                fontSize="small"
                color={pageNumber === pagesCount ? 'disabled' : 'secondary'}
              />
            </IconButton>
          </Stack>
          <Stack
            alignItems="center"
            alignContent="center"
            mt={4}
          >
            <Box sx={{ borderStyle: 'solid', width: width + 5 }}>
              {!currentImage ? (
                <Document
                  file={file}
                  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>
              ) : (
                <RegionSelect
                  constraint
                  regions={fields}
                  onChange={onChange}
                  moveRegion={moveField}
                  currentPage={pageNumber}
                  regionStyle={regionStyle}
                  selectRegion={selectField}
                  regionRenderer={regionRenderer}
                  style={{ border: '1px solid black' }}
                  minSignatureWidth={minSignatureWidth}
                  minHeight={minHeight}
                  maxHeight={minHeight}
                  minWidth={minWidth}
                  pageHeight={pageHeight}
                  pageWidth={pageWidth}
                >
                  <img
                    src={currentImage}
                    alt="pdf-file"
                    width={width}
                  />
                </RegionSelect>
              )}
            </Box>
          </Stack>
        </Box>
      )}
    />
  );
};

export default FormPDFFields;