import { 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";

interface PDFViewerProps {
	pitchBookId: string;
}

export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
	const [numPages, setNumPages] = useState<number | null>(null);
	const [pageNumber, setPageNumber] = useState(1);
	const [containerWidth, setContainerWidth] = useState<number | null>(null);
	const containerRef = useRef<HTMLDivElement>(null);

	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);
	}, []);

	return (
		<Box
			display="flex"
			flexDirection="column"
			justifyContent="center"
			alignItems="center"
			width="100%"
			height="100%"
			p={2}
		>
			<Box
				ref={containerRef}
				sx={{
					width: "100%",
					maxHeight: "90vh",
					overflow: "auto",
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
				}}
			>
				<Document
					file={`http://localhost:5050/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.8} />
					)}
				</Document>
			</Box>
			<Box
				mt={2}
				display="flex"
				alignItems="center"
				justifyContent="center"
				gap={1}
			>
				<IconButton
					disabled={pageNumber <= 1}
					onClick={() => setPageNumber((p) => p - 1)}
				>
					<ArrowCircleLeftIcon fontSize="large" />
				</IconButton>
				<span>
					{pageNumber} / {numPages}
				</span>
				<IconButton
					disabled={pageNumber >= (numPages || 1)}
					onClick={() => setPageNumber((p) => p + 1)}
				>
					<ArrowCircleRightIcon fontSize="large" />
				</IconButton>
			</Box>
		</Box>
	);
}