import React, { useRef, useEffect, useState } from 'react';
import WebViewer from '@pdftron/webviewer';
import './App.css';

const App = () => {
  const viewer = useRef(null);
  const [crop, setCrop] = useState(null);

  useEffect(() => {
    WebViewer({
      path: "/webviewer/lib/",
      initialDoc: "https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf",
      fullAPI: true,
      disableLogs: true,
      useDownloader: false
    },
      viewer.current,
    ).then(instance => {
      instance.UI.disableElements(['toolbarGroup-Shapes']);
      instance.UI.disableElements(['toolbarGroup-View']);
      instance.UI.disableElements(['toolbarGroup-Annotate']);
      instance.UI.disableElements(['toolbarGroup-FillAndSign']);
      instance.UI.disableElements(['toolbarGroup-Forms']);
      instance.UI.disableElements(['toolbarGroup-Insert']);

      const { docViewer, annotManager } = instance;
      const { Annotations, documentViewer, annotationManager, Tools, PDFNet } = instance.Core;

      instance.setToolMode('CropPage');
      instance.disableElements(['redoButton', 'undoButton']);

      var FitMode = instance.FitMode;
      instance.setFitMode(FitMode.FitWidth);

      PDFNet.initialize();

      const applyCrop = Tools.CropCreateTool.prototype.applyCrop;

      Tools.CropCreateTool.prototype.applyCrop = async function (e) {
        await PDFNet.initialize();
        const annotation = annotationManager.getAnnotationsList().find(annotation => annotation.ToolName === "CropPage");

        const cropRect = annotation.getRect();

        documentViewer.getDocument().loadCanvasAsync({
          pageNumber: annotation.PageNumber,
          renderRect: cropRect,
          drawComplete: async (canvas, index) => {
            console.log('CROP_DATA', canvas.toDataURL());
          }
        });

        const doc = await documentViewer.getDocument().getPDFDoc();
        const extractPage = await doc.getPage(annotation.PageNumber);
        const txt = await PDFNet.TextExtractor.create();
        const pageRect = await PDFNet.Rect.init(cropRect.x1, cropRect.y1, cropRect.x2, cropRect.y2);

        txt.begin(extractPage, pageRect, annotation.PageNumber); // Read the page.
        const extractedText = await txt.getAsText();
        console.log('text', extractedText);
        applyCrop.apply(this, arguments);
      };

    }).catch((error) => {
      console.log('Catch Exception', error);
    });

  }, []);

  return (
    <div className="App">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

export default App;