import { invoke } from "@tauri-apps/api/core";
import { open } from "@tauri-apps/plugin-dialog";
import { createSignal } from "solid-js";

export function FolderPicker() {
    const [selectedPath, setSelectedPath] = createSignal<string>("");

    const handleFolderSelect = async () => {
        try {
            const selected = await open({
                directory: true,
                multiple: false,
            });

            if (selected) {
                setSelectedPath(selected as string);
                // Send the path to Rust
                const response = await invoke("handle_selected_folder", {
                    path: selected,
                });

                console.log("DBG: ", response);
            }
        } catch (error) {
            console.error("DBG: ", error);
        }
    };

    return (
        <div class="flex flex-col items-center gap-4">
            <button
                type="button"
                onClick={handleFolderSelect}
                class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
            >
                Select Folder
            </button>

            {selectedPath() && (
                <div class="text-left max-w-md">
                    <p class="font-semibold">Selected folder:</p>
                    <p class="text-sm break-all">{selectedPath()}</p>
                </div>
            )}
        </div>
    );
}