<script lang="ts">
	import { page } from '$app/state';

	let fileId = page.params.fileId;
	let bookId = page.params.bookId;

	// Make sure this endpoint returns the complete PDF file
	let url = `${page.url.origin}/api/books/download/${bookId}/${fileId}`;

	let iframeEl = $state<HTMLIFrameElement>();

	$effect(() => {
		if (iframeEl && url) {
			// Use relative path to viewer.html with the PDF file URL as a parameter
			iframeEl.src = `/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`;
		}
	});
</script>

<div class="pdf-container">
	<iframe bind:this={iframeEl} title="PDF Viewer" class="pdf-iframe"></iframe>
</div>

<style>
	/* Make the container take up the full viewport height */
	.pdf-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
	}

	/* Make the iframe fill its container */
	.pdf-iframe {
		width: 100%;
		height: 100%;
		border: none;
	}
</style>
