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

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

async function run() {
    await init();

    let pteropus = await init_pteropus();

    let test_file_data = null;
    let needs_resize = true;

    let 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);

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

    while(true)
    {
        await pteropus.render();
        // 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
        }
        if(needs_resize) {
            await pteropus.on_resize();
            needs_resize = false;
        }
        await new Promise(requestAnimationFrame);
    }
}

run();