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

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

  createEffect(() => {
    // Listen for PNG processing events
    const unlisten = listen("png-processed", (event) => {
      console.log("Received processed PNG");
      const base64Data = event.payload as string;
      setLatestImage(`data:image/png;base64,${base64Data}`);
    });

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

  return (
    <>
      <TitleBar />
      <main class="container pt-8">
        <h1>Pick screenshots folder</h1>
        <FolderPicker />

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

export default App;