import * as ImGui_Impl from "./imgui_impl";
import * as ImGui from "imgui-js";
import { ImGuiIO } from "imgui-js"
import { ImVec4 } from "imgui-js";
import { ImVec2 } from "imgui-js";
import * as PIXI from "pixi.js";
import * as U from "./utils";

async function main(): Promise<void>
{
    PIXI.Renderer.registerPlugin("imgui_renderer", U.fromConstructor(ImGuiRenderer));

    console.log("main()");
    await ImGui.default();
    window.requestAnimationFrame(init);
}

let ctx: ImGui.ImGuiContext[] = [];
let currentCtx = 0;

const clearColor:ImVec4 = new ImVec4(0.7, 0.9, 1, 1);
function init(): void
{
    console.log("init()");
    console.log("Total allocated space (uordblks) @ _init:", ImGui.bind.mallinfo().uordblks);

    let settings = { width: 1, height: 1, antialias: true, backgroundColor: U.vec2col(clearColor) };

    let app : PIXI.Application = new PIXI.Application(settings);

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

    // Setup Dear ImGui binding
    ImGui.IMGUI_CHECKVERSION();
    for (var i = 0; i < 2; i++)
    {
        let newCtx: ImGui.ImGuiContext = ImGui.CreateContext();

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

        // Setup style
        ImGui.StyleColorsLight();

        ImGui_Impl.Init(app.view);

        ctx.push(newCtx);
    }

    ImGui.SetCurrentContext(ctx[0]);

    app.ticker.add(
        (deltaTime: number) =>
        {
            const dt: number = deltaTime * 1 / (1000 * PIXI.settings.TARGET_FPMS);

            ImGui_Impl.NewFrame(dt);
            ImGui.NewFrame();

            update(app, dt);

            ImGui.EndFrame();
            ImGui.Render();

            app.render();
        }
    );

    const imguiLayer:PIXI.Sprite = new PIXI.Sprite();
    imguiLayer.pluginName = "imgui_renderer";

    app.stage.addChild(imguiLayer);

    let resizeFunc = function()
    {
        app.renderer.resize(window.innerWidth, window.innerHeight);
    };

    window.onresize = resizeFunc;
    resizeFunc();

    window.onkeydown = keyDown;
}

function keyDown()
{
    currentCtx = (currentCtx + 1) % ctx.length;
    ImGui.SetCurrentContext(ctx[currentCtx]);
}

class ImGuiRenderer extends PIXI.ObjectRenderer
{
    constructor(r: PIXI.Renderer)
    {
        super(r);
    }
    render(notUsed: PIXI.DisplayObject): void
    {
        ImGui_Impl.RenderDrawData(ImGui.GetDrawData());
    }
}

let windowOpen: boolean = true;
let text: string = "text";
function update(app: PIXI.Application, timeElapsed: number): void
{
    ImGui.SetNextWindowPos(new ImVec2(0, 0));
    ImGui.SetNextWindowSize(new ImVec2(600, 400), ImGui.ImGuiCond.Always);
    ImGui.Begin("Test Window " + currentCtx, (_ = windowOpen) => windowOpen = _, 0); 
    if (currentCtx == 0)
    {
        if (ImGui.Button("Add Text"))
        {
            text += "A";
        }
        ImGui.Text(text);
    }
    else
    {
        ImGui.Text("Another context");
    }
    ImGui.End();
}



/*
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);
}
*/

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