src/components/views/search/documentModal/PdfViewer.tsx

import React, { useState } from "react";
import { Document, Page } from "react-pdf";

import "react-pdf/dist/Page/TextLayer.css";
import "react-pdf/dist/Page/AnnotationLayer.css";
import "./DocumentModal.scss";
import Button from "@/components/generics/button/Button";
import Input from "@/components/generics/input/Input";
import { GoChevronLeft, GoChevronRight } from "react-icons/go";

const PdfViewer: React.FC<{ file: Blob | null }> = ({ file }) => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [inputValue, setInputValue] = useState<string>(currentPage.toString());

  const onLoadSuccess = ({ numPages }: { numPages: number }) => {
    setNumPages(numPages);
    setCurrentPage(1);
    setInputValue("1");
  };

  const goToPage = (page: number) => {
    if (numPages && page >= 1 && page <= numPages) {
      setCurrentPage(page);
      setInputValue(page.toString());
    }
  };

  const handleInputChange = (value: string) => {
    setInputValue(value);
    const newValue = Number(value);
    if (!isNaN(newValue) && newValue >= 1 && newValue <= (numPages ?? 1)) {
      goToPage(newValue);
    }
  };

  const handleInputBlur = () => {
    const newValue = Number(inputValue);
    if (isNaN(newValue) || newValue < 1 || newValue > (numPages ?? 1)) {
      setInputValue(currentPage.toString());
    } else {
      goToPage(newValue);
    }
  };

  return (
    <div className="pdf-viewer">
      <div className="pdf-viewer__header">
        <Button
          onClick={() => goToPage(currentPage - 1)}
          icon={<GoChevronLeft />}
          buttonType="link"
          disabled={currentPage === 1}
        />
        Страница
        {
          <Input
            name=""
            style={{ width: "90px" }}
            placeholder="Cтраница"
            value={inputValue}
            onSetValue={handleInputChange}
            onBlur={handleInputBlur}
          />
        }
        из {numPages}
        <Button
          onClick={() => goToPage(currentPage + 1)}
          icon={<GoChevronRight />}
          buttonType="link"
          disabled={currentPage === numPages}
        />
      </div>
      <div className="pdf-viewer__container">
        <Document file={file} onLoadSuccess={onLoadSuccess} loading={<p>Загрузка документа...</p>}>
          <Page
            loading={null}
            key={`page_${currentPage}`}
            pageNumber={currentPage}
            data-page-number={currentPage}
            scale={1.3}
          />
        </Document>
      </div>
    </div>
  );
};

export default PdfViewer;