pse2_ff/project/frontend/src/components/pdfViewer.tsx

import { useCallback, useEffect, useRef, useState } from "react";
import { Document, Page } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft";
import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
import { Box, IconButton } from "@mui/material";
import type {
	CustomTextRenderer,
	OnGetTextSuccess,
} from "node_modules/react-pdf/dist/esm/shared/types";
import { socket } from "../socket";
import { API_HOST } from "../util/api";
import { highlightPattern } from "../util/highlighting";

interface PDFViewerProps {
	pitchBookId: string;
	currentPage?: number;
	onPageChange?: (page: number) => void;
	highlight: { text: string; page: number }[];
	focusHighlight: { text: string; page: number };
}

export default function PDFViewer({
	pitchBookId,
	currentPage,
	onPageChange,
	highlight = [],
	focusHighlight,
}: PDFViewerProps) {
	const [numPages, setNumPages] = useState<number | null>(null);
	const [pageNumber, setPageNumber] = useState(currentPage || 1);
	const [containerWidth, setContainerWidth] = useState<number | null>(null);
	const [pdfKey, setPdfKey] = useState(Date.now());
	const containerRef = useRef<HTMLDivElement>(null);
	const [posHighlight, setPosHighlight] = useState<string[]>([]);
	const [posHighlightFocus, setPosHighlightFocus] = useState<string[]>([]);
	const [textContent, setTextContent] = useState<
		{ posKey: string; text: string; i: number }[]
	>([]);

	const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
		setNumPages(numPages);
	};

	useEffect(() => {
		const updateWidth = () => {
			if (containerRef.current) {
				setContainerWidth(containerRef.current.offsetWidth);
			}
		};

		updateWidth();
		window.addEventListener("resize", updateWidth);
		return () => window.removeEventListener("resize", updateWidth);
	}, []);

	useEffect(() => {
		if (currentPage && currentPage !== pageNumber) {
			setPageNumber(currentPage);
		}
	}, [currentPage, pageNumber]);

	useEffect(() => {
		const handleProgress = (data: { id: number; progress: number }) => {
			if (data.id.toString() === pitchBookId && data.progress === 50) {
				setPdfKey(Date.now());
			}
		};

		socket.on("progress", handleProgress);

		return () => {
			socket.off("progress", handleProgress);
		};
	}, [pitchBookId]);

	const handlePageChange = (newPage: number) => {
		setPageNumber(newPage);
		onPageChange?.(newPage);
	};

	const textRenderer: CustomTextRenderer = useCallback(
		(textItem) => {
			return highlightPattern(
				textItem.str,
				`${textItem.width};${textItem.height};${textItem.transform}`,
				posHighlight,
				posHighlightFocus,
			);
		},
		[posHighlight, posHighlightFocus],
	);

	useEffect(() => {
		const tmpPos: string[] = [];
		const tmpPosHighlight: string[] = [];
		const textItems = textContent.filter(
			(e) => e.text !== "" && e.text !== " ",
		);

		textItems.forEach((e, i) => {
			for (const s of highlight
				.filter((h) => h.page === pageNumber)
				.map((h) => h.text)) {
				if (s.split(" ")[0] === e.text) {
					if (
						s.split(" ").reduce((prev, curr, j) => {
							return prev && curr === textItems[i + j].text;
						}, true)
					) {
						for (
							let k = textItems[i].i;
							k < textItems[i + s.split(" ").length]?.i ||
							k < textItems[i + s.split(" ").length - 1]?.i;
							k++
						) {
							tmpPos.push(textContent[k].posKey);
						}
					}
				}
			}

			if (focusHighlight?.page === pageNumber) {
				if (focusHighlight.text.split(" ")[0] === e.text) {
					if (
						focusHighlight.text.split(" ").reduce((prev, curr, j) => {
							return prev && curr === textItems[i + j].text;
						}, true)
					) {
						for (
							let k = textItems[i].i;
							k < textItems[i + focusHighlight.text.split(" ").length]?.i ||
							k < textItems[i + focusHighlight.text.split(" ").length - 1]?.i;
							k++
						) {
							tmpPosHighlight.push(textContent[k].posKey);
						}
					}
				}
			}
		});
		setPosHighlight(tmpPos);
		setPosHighlightFocus(tmpPosHighlight);
	}, [highlight, focusHighlight, pageNumber, textContent]);

	const onGetTextSuccess: OnGetTextSuccess = useCallback((fullText) => {
		setTextContent(
			fullText.items.map((e, i) => ({
				posKey: `${"width" in e ? e.width : 0};${"height" in e ? e.height : 0};${"transform" in e ? e.transform : ""}`,
				text: "str" in e ? e.str : "",
				i,
			})),
		);
	}, []);

	return (
		<Box
			display="flex"
			flexDirection="column"
			justifyContent="center"
			alignItems="center"
			width="100%"
			height="auto"
		>
			<Box
				ref={containerRef}
				sx={{
					width: "100%",
					height: "auto",
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
				}}
			>
				<Document
					key={pdfKey}
					file={`${API_HOST}/api/pitch_book/${pitchBookId}/download`}
					onLoadSuccess={onDocumentLoadSuccess}
					onLoadError={(error) =>
						console.error("Es gab ein Fehler beim Laden des PDFs:", error)
					}
					onSourceError={(error) => console.error("Ungültige PDF:", error)}
				>
					{containerWidth && (
						<Page
							pageNumber={pageNumber}
							width={containerWidth * 0.98}
							customTextRenderer={textRenderer}
							onGetTextSuccess={onGetTextSuccess}
						/>
					)}
				</Document>
			</Box>
			<Box
				mt={1}
				display="flex"
				alignItems="center"
				justifyContent="center"
				gap={1}
				p={1}
			>
				<IconButton
					disabled={pageNumber <= 1}
					onClick={() => handlePageChange(pageNumber - 1)}
				>
					<ArrowCircleLeftIcon fontSize="large" />
				</IconButton>
				<span>
					{pageNumber} / {numPages}
				</span>
				<IconButton
					disabled={pageNumber >= (numPages || 1)}
					onClick={() => handlePageChange(pageNumber + 1)}
				>
					<ArrowCircleRightIcon fontSize="large" />
				</IconButton>
			</Box>
		</Box>
	);
}