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

// Set workerSrc to load PDF.js worker (important for performance)
//pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const PDFJsViewer = ({ fileUrl }) => {
    const [numPages, setNumPages] = useState(null);

    function onDocumentLoadSuccess({ numPages }) {
        setNumPages(numPages);
        console.log("PDF pages: " + numPages);
    }

    return (
        <div>
            <Document
                file={fileUrl}
                onLoadSuccess={onDocumentLoadSuccess}
                options={{ workerSrc: "https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js" }}
            >
                {Array.from(new Array(numPages), (el, index) => (
                    <Page key={`page_${index + 1}`} pageNumber={index + 1} />
                ))}
            </Document>
        </div>
    );
};

export default PDFJsViewer;