import React, {useCallback, useRef, useState} from 'react';
import {Document, Page, pdfjs} from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
interface IProps {
    url: string;
}
const opt =  {
    cMapUrl: `${window.location.origin}/cmaps/`,
    cMapPacked: true,
    isEvalSupported: false,
}

const PageRender = ({url}: IProps) => {
    const [numPages, setNumPages] = useState(1);
    const pageRef = useRef<HTMLDivElement>(null);
    
    const onDocumentLoadSuccess = useCallback(
        (document) => {
            const {numPages: nextNumPages} = document;
            setNumPages(nextNumPages);
        },
        []
    );
   
    return (
        <div
            className={'pageReaderWrap'}
            ref={pageRef}
        >
            <Document
                file={url}
                key={url}
                onLoadSuccess={onDocumentLoadSuccess}
                options={opt}
            >
                {Array.from(new Array(numPages), (el, index) => {
                    return (
                        <Page
                            key={`page_${index + 1}`}
                            renderTextLayer={false}
                            loading={''}
                            renderAnnotationLayer={false}
                            pageNumber={index + 1}
                        />
                    );
                })}
            </Document>
        </div>
    );
};

export default PageRender;

devtool: isDevelopment ? 'eval-source-map' : 'source-map',