import { FC, useState, useEffect } from 'react';

import { useTranslation } from 'react-i18next';

import DownloadIcon from '@material-hu/icons/material/Download';
import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import Typography from '@material-hu/mui/Typography';

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

import pdfIcon from 'src/assets/svg/pdf.svg';
import { Document, Page } from 'src/config/react-pdf';
import { Attachment } from 'src/types/attachments';

import PdfViewer from 'src/components/attachment/PdfViewer';

export type PdfAttachmentProps = {
  file: Attachment;
  isLoading?: boolean;
};

const PdfAttachment: FC<PdfAttachmentProps> = props => {
  const { file, isLoading = false } = props;

  const { t } = useTranslation('attachments');

  const [pageNumber, setPageNumber] = useState(1);
  const [numPages, setNumPages] = useState<number | null>(null);
  const [openPdfPreview, setOpenPdfPreview] = useState(false);

  useEffect(() => {
    setNumPages(null);
    setPageNumber(1);
  }, [file]);

  const onDocumentLoadSuccess = ({
    numPages: newNumPages,
  }: {
    numPages: number;
  }) => {
    setNumPages(newNumPages);
  };

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
    window.open(file.url, '_blank', 'noopener,noreferrer');
  };

  const handleOpenPdfPreview = () => setOpenPdfPreview(true);

  const handleClosePdfPreview = () => setOpenPdfPreview(false);

  return (
    <>
      <Button
        onClick={handleOpenPdfPreview}
        sx={{
          width: '350px',
          cursor: 'zoom-in',
          backgroundColor: '#f5f6f6',
          p: 0,
          '&:hover': {
            backgroundColor: '#f5f6f6',
          },
        }}
      >
        <Box sx={{ width: '100%' }}>
          {!isLoading && (
            <Box
              sx={{
                width: '350px',
                height: '160px',
                overflow: 'hidden',
              }}
            >
              <Document
                file={file.url}
                onLoadSuccess={onDocumentLoadSuccess}
                loading={
                  <Box
                    sx={{
                      backgroundColor: '#FFFFFF',
                      width: '350px',
                      height: '160px',
                      textAlign: 'center',
                    }}
                  >
                    <CircularProgress color="primary" />
                  </Box>
                }
              >
                <Page
                  pageNumber={pageNumber}
                  width={352}
                  height={160}
                />
              </Document>
            </Box>
          )}
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              py: 1.2,
              px: 2.2,
              alignItems: 'center',
            }}
          >
            <Box sx={{ display: 'flex', pl: 1 }}>
              <img
                src={pdfIcon}
                alt="pdfIcon"
                style={{ width: '24px', height: '30px' }}
              />
              <Box sx={{ width: '250px', textAlign: 'left', ml: 1 }}>
                <Typography
                  sx={{
                    fontSize: '14px',
                    color: '#1D1C1D',
                    fontWeight: 600,
                    lineHeight: '16px',
                  }}
                >
                  {file.name}
                </Typography>
                <Typography sx={{ fontSize: '11px', color: '#6c757d' }}>
                  {t('pdf_description', {
                    count: numPages || 0,
                    usage: file.size,
                  })}
                </Typography>
              </Box>
            </Box>
            {isLoading && (
              <Box>
                <CircularProgress size={30} />
              </Box>
            )}
            {!isLoading && (
              <IconButton
                aria-label={file.name}
                onClick={handleClick}
                sx={{ borderRadius: '4px' }}
              >
                <DownloadIcon
                  sx={{ color: '#000000', width: '24px', height: '24px' }}
                />
              </IconButton>
            )}
          </Box>
        </Box>
      </Button>
      {openPdfPreview && (
        <PdfViewer
          file={file}
          onClose={handleClosePdfPreview}
        />
      )}
    </>
  );
};

export default PdfAttachment;