Untitled

import { useState } from 'react';
import Modal from '@/components/Modal';
import Button from '@/components/Button';
import { Cancel, Download } from '../Icon';
import Typography from '../Typography';
import { ZoomIn, ZoomOut } from '@/components/Icon';
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

const PreviewEvidence = (props: any) => {
  const { isOpen, onClose, fileUrl, fileName } = props;
  const [numPages, setNumPages] = useState(0);
  // const [scale, setScale] = useState(1.25);
  const [scale, setScale] = useState(1); // for a4 landscape

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

  const content = () => {
    const btnClose = () => (
      <button
        onClick={onClose}
        className="appearance-none no-underline hover:opacity-2"
      >
        <Cancel className="text-general-main" height={20} width={20} />
      </button>
    );

    const btnDownload = () => (
      <button
        onClick={() => window.open(fileUrl)}
        className="appearance-none no-underline hover:opacity-2"
      >
        <Download className="text-general-main" height={20} width={20} />
      </button>
    );

    const view = (type: string) => {
      const image = (
        <div className="flex justify-center">
          <img
            style={{ maxHeight: '80vh' }}
            src={fileUrl}
            alt={`Preview ${fileName}`}
          />
        </div>
      );

      const document = (
        <div className="flex justify-center w-full">
          <div className="pb-20">
            <Document
              file={fileUrl}
              onLoadSuccess={onDocumentLoadSuccess}
              className="text-gray-50"
            >
              {Array.from(new Array(numPages), (el, index) => (
                <div>
                  <Page
                    className="mb-3 flex justify-center"
                    key={`page_${index + 1}`}
                    pageNumber={index + 1}
                    scale={scale}
                  />
                </div>
              ))}
            </Document>
          </div>
          {numPages > 0 && (
            <div className="flex fixed mb-5 justify-center bottom-1.5 h-12">
              <div
                className="flex items-center bg-white px-4"
                style={{
                  boxShadow: '0px 6px 9px rgba(46, 67, 77, 0.08)',
                }}
              >
                <div
                  className="flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-200"
                  style={{ width: 40, height: 40 }}
                  onClick={() => {
                    setScale(scale - 0.25);
                  }}
                >
                  <ZoomOut />
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div
                  className="flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-200"
                  style={{ width: 40, height: 40 }}
                  onClick={() => {
                    setScale(scale + 0.25);
                  }}
                >
                  <ZoomIn />
                </div>
              </div>
            </div>
          )}
        </div>
      );

      switch (type) {
        case 'png':
          return image;
        case 'jpg':
          return image;
        case 'jpeg':
          return image;
        case 'pdf':
          return document;
        default:
          return (
            <div className="bg-white rounded pt-5 mt-10">
              <Typography variant="h4" className="block ml-3 text-center mb-5">
                Sorry, We Cannot Preview your file
              </Typography>
              <div className="flex flex-col justify-center items-center pb-5">
                <Button
                  children="Download File"
                  onClick={() => window.open(fileUrl)}
                  size="medium"
                />
              </div>
            </div>
          );
      }
    };

    return (
      <>
        <div
          className="absolute z-0 bg-transparent w-full h-full"
          onClick={onClose}
        />
        <div className="z-30 justify-between absolute top:0 p-5 bg-white w-full flex align-center shadow-md">
          <div className="flex">
            {btnClose()}
            <Typography variant="subtitle1" className="block ml-3">
              {fileName}
            </Typography>
          </div>
          {btnDownload()}
        </div>
        <div className="z-10 ml-auto mr-auto mt-20 overflow-auto w-full">
          {view(fileName?.split('.')[1])}
        </div>
      </>
    );
  };

  return (
    <Modal
      size="fluid"
      title={fileName}
      type="preview"
      isOpen={isOpen as boolean}
      onRequestClose={onClose}
      content={content()}
    />
  );
};

export default PreviewEvidence;