text: import React, {useContext, useEffect, useState} from 'react';
  import styled from "styled-components";
  import { isMobile } from "react-device-detect";
  import { Document, Page, pdfjs } from 'react-pdf';
  import {ThemeContext} from "../../../providers/ThemeProvider";
  pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
  
  const PDFContainer = styled.div`
          .react-pdf__Page__canvas, .react-pdf__Page__svg {
              width: 100% !important;
              max-width: 1000px !important;
              height: 100% !important;
              border: 1px solid rgba(0, 0, 0, 0.3);
              margin: 2px auto;
              filter: ${({ theme }) => (theme === 'light' ? 'none' : 'invert(100%)')};
              
              & svg {
                width: 100% !important;
                height: 100% !important;
              }
          }
          //.react-pdf__Page__textContent {
          //  margin: 0;
          //  padding: 0;
          //  height: 100% !important;
          //  width: 100% !important;
          //}
      `;
  
  const PDFReader = ( { pdfFile } ) => {
      const [numPages, setNumPages] = useState(null);
      // const [renderText, setTextVisibility] = useState(false);
      // const [pageNumber, setPageNumber] = useState(1); //setting 1 to show first page
      const [ _isMobile, setMobile ] = useState();
      useEffect(() => {
          setMobile(isMobile);
      }, [setMobile])
  
      function onDocumentLoadSuccess({ numPages }) {
          setNumPages(numPages);
          // setPageNumber(1);
          // setTextVisibility(true);
      }
  
      // function changePage(offset) {
      //     setPageNumber(prevPageNumber => prevPageNumber + offset);
      // }
      //
      // function previousPage() {
      //     changePage(-1);
      // }
      //
      // function nextPage() {
      //     changePage(1);
      // }
  
      const { theme } = useContext(ThemeContext);
  
      return (
          <PDFContainer theme={theme}>
              <Document
                  file={pdfFile}
                  renderMode={ _isMobile ? "svg" : "canvas" }
                  options={{ workerSrc: "/pdf.worker.js" }}
                  onLoadSuccess={ onDocumentLoadSuccess }
                  onLoadError={ console.error }
              >
                  {/*<Page pageNumber={pageNumber} />*/}
                  {Array.apply(null, Array(numPages))
                      .map((x, i)=>i+1)
                      .map(page => <Page pageNumber={page} key={page} scale={ _isMobile ? 1 : 2 } renderTextLayer={false}/>)}
              </Document>
              {/*<div>*/}
              {/*    <p>*/}
              {/*        Page {pageNumber || (numPages ? 1 : "--")} of {numPages || "--"}*/}
              {/*    </p>*/}
              {/*    <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>*/}
              {/*        Previous*/}
              {/*    </button>*/}
              {/*    <button*/}
              {/*        type="button"*/}
              {/*        disabled={pageNumber >= numPages}*/}
              {/*        onClick={nextPage}*/}
              {/*    >*/}
              {/*        Next*/}
              {/*    </button>*/}
              {/*</div>*/}
          </PDFContainer>
      );
  }
  
  export default PDFReader