import styles from "./styles.module.scss";
import { useRef, useState } from "react";
import { Document, DocumentProps, Page } from "react-pdf";
import Loader, { LoaderColor } from "../Loader";
import { Pagination } from "@mui/material";

interface IPDFViewerProps {
  width?: number;
  file?: DocumentProps["file"];
}

const pagesOfPaginationPageLength = 1;

function PDFViewer(props: IPDFViewerProps & DocumentProps = {}) {
  const { width = 496, file, className = "" } = props;
  const [numPages, setNumPages] = useState<number>(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isLoadingDocument, setIsLoadingDocument] = useState<boolean>(true);
  const [paginationPage, setPaginationPage] = useState(1);
  const [isLoadingPage, setIsLoadingPage] = useState<boolean>(true);

  const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
    setIsLoadingPage(true);
    setPaginationPage(value);
  };

  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
    setIsLoadingDocument(false);
  }

  return (
    <>
      <div
        ref={containerRef}
        style={{
          minHeight: "calc(100dvh - 32px)",
        }}
      >
        {isLoadingDocument && (
          <Loader
            color={LoaderColor.White}
            className={styles["document-loader"]}
          />
        )}
        <Document
          loading={<></>}
          file={file}
          onLoadSuccess={onDocumentLoadSuccess}
          className={className}
        >
          {Array.from({ length: pagesOfPaginationPageLength }, (_, i) => {
            return (
              <Page
                loading={<></>}
                key={i}
                pageNumber={
                  i + pagesOfPaginationPageLength * (paginationPage - 1) + 1
                }
                width={width}
                className={styles["pdf-page"]}
                onRenderSuccess={() => {
                  setIsLoadingPage(false);
                }}
              >
                {isLoadingPage && (
                  <Loader
                    className={styles["pdf-page__loader"]}
                    color={LoaderColor.Black}
                  />
                )}
              </Page>
            );
          })}
        </Document>
      </div>
      {!isLoadingDocument && (
        <Pagination
          classes={{ ul: styles["pagination-list"] }}
          className={styles.pagination}
          count={Math.ceil(numPages / pagesOfPaginationPageLength)}
          onChange={handleChange}
        />
      )}
    </>
  );
}

export default PDFViewer;