import init, {init_pteropus, PteropusInitError} from '../pkg/pteropus.js';

function fileDragOverHandler(event) {
    event.preventDefault();
}

async function run() {
    await init();

    try {
        let pteropus = await init_pteropus();
    } catch(e) {
        const errorParagraph = document.createElement("p");
        if(e instanceof PteropusInitError) {
            const errorMessage = document.createTextNode(e.message);
            errorParagraph.appendChild(errorMessage);
        } else {
            const errorMessage = document.createTextNode("Something unexpected happened.");
            errorParagraph.appendChild(errorMessage);
        }
        document.getElementById("whole-window").replaceWith(errorParagraph);
        return;
    }

    let test_file_data = null;
    let needs_resize = true;
    let clear_scene = false;

    const mainCanvas = document.getElementById("pteropus-canvas");
    mainCanvas.addEventListener("drop", async (event) => {
        event.preventDefault();
        test_file_data = event.dataTransfer.files[0]
    });
    mainCanvas.addEventListener("dragover", fileDragOverHandler);
    const resizeObserver = new ResizeObserver((entries) => {
        needs_resize = true;
    });
    resizeObserver.observe(mainCanvas);

    const fileUploadButton = document.getElementById("file-upload-file-input");
    fileUploadButton.addEventListener("change", () => {
        const files = fileUploadButton.files;
        if(files.length > 0) {
            test_file_data = files[0]
        }
    });

    const clearSceneButton = document.getElementById("clear-scene-button");
    clearSceneButton.addEventListener("click", () => {
        clear_scene = true;
    });

    [
        {
            buttonId: "load-small-sample-button",
            url: "small_sample.tiff"
        },
        {
            buttonId: "load-medium-sample-button",
            url: "medium_sample.tiff"
        },
        {
            buttonId: "load-large-sample-button",
            url: "large_sample.tiff"
        }
    ].forEach( (sample) => {
        let loadSampleButton = document.getElementById(sample.buttonId);
        loadSampleButton.addEventListener("click", async () => {
            const response = await fetch(sample.url);
            if(!response.ok) {
                console.error("Couild not load sample file.")
            }
            test_file_data = await response.blob()
        });
    });

    while(true)
    {
        await pteropus.render();
        if(needs_resize) {
            await pteropus.on_resize();
            needs_resize = false;
        }
        if(clear_scene) {
            await pteropus.clear_scene();
            clear_scene = false;
        }
        // TODO: I really want to do this asynchronously, with the drop
        // event listener calling pteropus_load_file directly, but I need
        // to figure out how to get that to work.
        if(test_file_data) {
            await pteropus.load_file(test_file_data);
            test_file_data = null
        }
        await new Promise(requestAnimationFrame);
    }
}

run();