<script lang="ts">
 import { onMount } from "svelte";
 import { get } from "svelte/store";
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { Button } from "@gradio/button";
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 import { Checkbox } from "@gradio/form"
 import uiState from "$lib/stores/uiState";
 import { ImageViewer } from "$lib/ImageViewer";
 import { download } from "$lib/utils"

 import { LGraph, LGraphNode } from "@litegraph-ts/core";
 import type { ComfyAPIStatus } from "$lib/api";
 import queueState from "$lib/stores/queueState";
 import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"

 let app: ComfyApp | null = null;

 onMount(async () => {
     if (app)
         return
     app = $uiState.app = new ComfyApp();


     app.api.addEventListener("status", (ev: CustomEvent) => {
         queueState.statusUpdated(ev.detail as ComfyAPIStatus);
     });

     await app.setup();
     (window as any).app = app;

 });

</script>

<Page name="home">
    <Navbar title="Home Page" />

    <BlockTitle>Yo</BlockTitle>
    <Block>
        <div>{app} Nodes</div>
    </Block>

    <List strong inset dividersIos class="components-list searchbar-found">
        <ListItem link="/subworkflows/" title="Workflows">
            <i class="icon icon-f7" slot="media" />
        </ListItem>
        <ListItem link="/graph/" title="Show Node Graph">
            <i class="icon icon-f7" slot="media" />
        </ListItem>
    </List>

    <div class="canvas-wrapper pane-wrapper" style="display: none">
        <canvas id="graph-canvas" />
    </div>
</Page>
