<script lang="ts">
    import type FileViewState from "../models/FileViewState.svelte";
    import StreamEditor from "./StreamEditor.svelte";
    import type { StreamData } from "../models/StreamData.svelte";
    import ImageViewer from "./ImageViewer.svelte";

    let {
        fState,
        height,
    }: {
        fState: FileViewState;
        height: number;
    } = $props();
    let streamData: StreamData | undefined = $derived(
        fState.container_prim?.stream_data,
    );
</script>

{#if streamData}
    {#if streamData.type === "Image"}
        <ImageViewer img={streamData.imageData} {height}
        ></ImageViewer>
    {:else if streamData.textData}
        <StreamEditor
            stream_data={streamData.textData}
            {height}
            save={(updated_data) => fState.saveStreamData(updated_data)}
        ></StreamEditor>
    {/if}
{/if}

<style lang="postcss">
</style>
