import * as ImGui_Impl from "../imgui-js/example/imgui_impl";
import * as ImGui from "imgui-js";
import { ImGuiIO } from "imgui-js"
import { ImVec4 } from "imgui-js";
import { ImVec2 } from "imgui-js";

async function main(): Promise<void>
{
    console.log("main()");
    await ImGui.default();
    window.requestAnimationFrame(init);
}

function init(): void
{
    console.log("init()");
    console.log("Total allocated space (uordblks) @ _init:", ImGui.bind.mallinfo().uordblks);

    // Setup Dear ImGui binding
    ImGui.IMGUI_CHECKVERSION();
    ImGui.CreateContext();

    const io: ImGuiIO = ImGui.GetIO();
    io.ConfigFlags |= ImGui.ConfigFlags.NavEnableKeyboard;  // Enable Keyboard Controls

    // Setup style
    ImGui.StyleColorsLight();

    const output: HTMLElement = document.getElementById("output") || document.body;
    const canvas: HTMLCanvasElement = document.createElement("canvas");
    output.appendChild(canvas);
    canvas.tabIndex = 1;
    canvas.style.position = "absolute";
    canvas.style.left = "0px";
    canvas.style.right = "0px";
    canvas.style.top = "0px";
    canvas.style.bottom = "0px";
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    ImGui_Impl.Init(canvas);

    window.requestAnimationFrame(loop);
}

const clearColor:ImVec4 = new ImVec4(0.7, 0.9, 1, 1);
let windowOpen: boolean = true;
let text: string = "text";
function render(timeElapsed: number): void
{
    ImGui.SetNextWindowSize(new ImVec2(600, 400), ImGui.ImGuiCond.Always);
    ImGui.Begin("Test Window", (_ = windowOpen) => windowOpen = _, 0); 
    if (ImGui.Button("Add Text"))
    {
        text += "A";
    }
    ImGui.Text(text);
    ImGui.End();
}


function loop(timeElapsed: number): void
{
    ImGui_Impl.NewFrame(timeElapsed);
    ImGui.NewFrame();

    render(timeElapsed);

    ImGui.EndFrame();

    // Rendering
    ImGui.Render();
    const gl: WebGLRenderingContext | null = ImGui_Impl.gl;
    if (gl) {
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        gl.clearColor(clearColor.x, clearColor.y, clearColor.z, clearColor.w);
        gl.clear(gl.COLOR_BUFFER_BIT);
        //gl.useProgram(0); // You may want this if using this code in an OpenGL 3+ context where shaders may be bound
    }

    const ctx: CanvasRenderingContext2D | null = ImGui_Impl.ctx;
    if (ctx) {
        // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = `rgba(${clearColor.x * 0xff}, ${clearColor.y * 0xff}, ${clearColor.z * 0xff}, ${clearColor.w})`;
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }

    ImGui_Impl.RenderDrawData(ImGui.GetDrawData());

    window.requestAnimationFrame(loop);
}

(function()
 {
     if (document.readyState == "complete")
     {
         main();
     }
     else
     {
         window.onload = main;
     }
 })();