import { createEffect, createSignal } from "solid-js";
import { listen } from "@tauri-apps/api/event";
import { FolderPicker } from "./FolderPicker";
import { sendImage } from "../network";

export function ImageViewer() {
    const [latestImage, setLatestImage] = createSignal<string | null>(null);

    createEffect(() => {
        // Listen for PNG processing events
        const unlisten = listen("png-processed", (event) => {
            console.log("Received processed PNG", event);
            const base64Data = event.payload as string;

            setLatestImage(`data:image/png;base64,${base64Data}`);
            sendImage("test-image.png", base64Data);
        });

        return () => {
            unlisten.then((fn) => fn()); // Cleanup listener
        };
    });

    return (
        <div>
            <FolderPicker />

            {latestImage() && (
                <div class="mt-4">
                    <h3>Latest Processed Image:</h3>
                    <img
                        src={latestImage() || undefined}
                        alt="Latest processed"
                        class="max-w-md"
                    />
                </div>
            )}
        </div>
    );
}
