<script lang="ts">
    import {Pane, Splitpanes} from "svelte-splitpanes";
    import type FileViewState from "../models/FileViewState.svelte";
    import StreamEditor from "./StreamEditor.svelte";
    import ContentModel from "../models/ContentModel.svelte";
    import type DocumentWorker from '../models/Document.svelte';
    import ContentEditor from './ContentEditor.svelte';

    let display: HTMLCanvasElement;

    let {fState, height}: {fState: FileViewState, height: number} = $props();
    let renderer: DocumentWorker = $derived(fState.document);
    let pageNum = $derived(fState.currentPageNumber);
    let contents: ContentModel | undefined = $state(undefined)

    $effect(() => {
        if (pageNum) {
            renderer.renderPage(pageNum, display);
            renderer.getContents(pageNum).then(parts => {
                contents = parts;
              }
            );
        } else {
            contents = undefined;
        }
    })


</script>
{#if pageNum}
    <Splitpanes theme="forge-movable">
        <Pane minSize={1}>
            <div class="overflow-hidden">
                {#if contents}
                    <ContentEditor save={(newData) => console.log("Save")} contents={contents} height={height - 1}></ContentEditor>
                {/if}
            </div>
        </Pane>
        <Pane minSize={1}>
            <canvas bind:this={display}></canvas>
        </Pane>
    </Splitpanes>
{:else }
    <h1>Please select a Page!</h1>
{/if}
<style lang="postcss">

</style>