// // import { useState } from "react";
// // import { Document, Page } from "react-pdf/dist/esm/entry.webpack";
// // import "react-pdf/dist/esm/Page/AnnotationLayer.css";
// // import "./App.css";

// // const App = () => {
// //   const [numPages, setNumPages] = useState(null);
// //   const [pageNumber, setPageNumber] = useState(1);

// //   const onDocumentLoadSuccess = ({ numPages }) => {
// //     setNumPages(numPages);
// //   };

// //   const goToPrevPage = () =>
// //     setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);

// //   const goToNextPage = () =>
// //     setPageNumber(pageNumber + 1 >= numPages ? numPages : pageNumber + 1);

// //   return (
// //     <div className="page">
// //       <nav>
// //         <button onClick={goToPrevPage} className="previous">
// //           Prev
// //         </button>
// //         <button onClick={goToNextPage} className="next">
// //           Next
// //         </button>
// //         <p>
// //           Page {pageNumber} of {numPages}
// //         </p>
// //       </nav>

// //       <Document file="document.pdf" onLoadSuccess={onDocumentLoadSuccess}>
// //         <Page pageNumber={pageNumber} />
// //       </Document>
// //     </div>
// //   );
// // };

// // export default App;
// import logo from './logo.svg';
// import './App.css';
// import PDFViewer from './components/PDFViewer';
// import Testing from './components/Testing';
// import Pdflib from './components/Pdflib';


// function App() {
//   return (
//     <div className="App">
//       <Pdflib/>
//       <PDFViewer/>
//     </div>
//   );
// }

// export default App;
import logo from './logo.svg';
import './App.css';
import PDFViewer from './components/PDFViewer';
import Testing from './components/Testing';
import Pdflib from './components/Pdflib';

import React, { useState, useEffect, useRef } from "react";
import { Document, Page } from "react-pdf/dist/esm/entry.webpack";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";


function App() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [selectedPdf, setSelectedPdf] = useState(null);
  const pdfContentRef = useRef(null);

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

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    setSelectedPdf(file);
    setPageNumber(1); // Reset page number when selecting a new PDF
  };

  const handleScroll = () => {
    if (pdfContentRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = pdfContentRef.current;
      if (scrollTop + clientHeight >= scrollHeight) {
        setPageNumber(prevPageNumber => Math.min(prevPageNumber + 1, numPages));
      }
      if (scrollTop === 0) {
        setPageNumber(prevPageNumber => Math.max(prevPageNumber - 1, 1));
      }
    }
  };

  useEffect(() => {
    const pdfContent = pdfContentRef.current;
    if (pdfContent) {
      pdfContent.addEventListener('scroll', handleScroll);
    }
    return () => {
      if (pdfContent) {
        pdfContent.removeEventListener('scroll', handleScroll);
      }
    };
  }, [numPages]);

  return (
    <div className="App">
      <div className="pdf-viewer">
      <label htmlFor="fileInput">Select a PDF:</label>
      <input
        type="file"
        id="fileInput"
        accept=".pdf"
        onChange={handleFileChange}
      />
      {selectedPdf && (
        <div className="pdf-container">
          <div className="pdf-content" ref={pdfContentRef}>
            <Document file={selectedPdf} onLoadSuccess={onDocumentLoadSuccess}>
              <Page pageNumber={pageNumber} />
            </Document>
          </div>
          <nav>
            <p>
              Page {pageNumber} of {numPages}
            </p>
          </nav>
        </div>
      )}
    </div>
      
    </div>
  );
}

export default App;
