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

    let {fState, height}: {fState: FileViewState, height: number} = $props();
    let state: PageViewState = new PageViewState(fState, render);
    let contents: ContentModel | undefined = $derived(state?.contents)
    let display: HTMLCanvasElement;
    fState.pageViewState = state;

    function render() {
        console.log("render", display)
        state.loadImage(display);
    }

</script>
{#if state}
    <Splitpanes theme="forge-movable">
        <Pane minSize={1}>
            <div class="overflow-hidden">
                <StreamEditor save={(newData) => state.handleSave(newData)} stream_data={contents ? contents.toDisplay() : ""} height={height - 1}></StreamEditor>
            </div>
        </Pane>
        <Pane minSize={1}>
            <RenderedPageView bind:img={display} {height}></RenderedPageView>
        </Pane>
    </Splitpanes>
{:else }
    <h1>Please select a Page!</h1>
{/if}
<style lang="postcss">

</style>