import { Document, Page } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import 'react-pdf/dist/esm/Page/TextLayer.css';

import Pagination from "@shared/nej-react-components/Parts/Pagination";

import tw, { styled } from "twin.macro"
import "styled-components/macro"
import { useState } from "react";

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();

export default function PDF({ data }) {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div tw="w-full flex flex-col items-start">

      <Document file={data} onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      {/* 
        <div tw=" w-[21cm] h-[29.7cm] mt-20 overflow-hidden">
          <BalanceDocument />
        </div>
        <div tw=" w-[80mm] mt-20 overflow-hidden">
          <ReceiptDocument />
        </div>
        <div tw=" w-[21cm] mt-10 overflow-hidden h-[29.7cm]">
          <CorrectureDocument data={data} />
        </div>
        <div tw=" w-[21cm] mt-20 overflow-hidden">
          <TransactionDocument data={data}/>
        </div> */}

      <p tw="mt-4">
                Page {pageNumber} of {numPages}
      </p>
      <Pagination maxPages={numPages} currentPage={pageNumber} setPage={(p) => setPageNumber(p)} />
    </div>
  );
}