import subscribe from "callbag-subscribe";

import { KeyControl, KeyName } from "../Applet/Keyboard";
import { DrawSet } from "../Applet/Render";
import { Location, Polygon, RenderBounds } from "../Ecs/Components";
import { Create } from "../Ecs/Data";
import { RunRenderBounds } from "../Ecs/Renderers";
import { LockstepClient } from "../Net/LockstepClient";
import { Loopback } from "../Net/LoopbackServer";
import { Data, Engine } from "./GameComponents";
import { Buttons } from "./Input";

export class Main extends LockstepClient<KeyName[], Data> {

    buttons = new Buttons();

    constructor(canvas: HTMLCanvasElement, cx: CanvasRenderingContext2D, keys: KeyControl) {
        super(new Engine());
        keys.setHandler(this.buttons);

        this.connect(Loopback);

        subscribe((frame: Data) => {
            const drawSet = new DrawSet();
            cx.fillStyle = "#000";
            cx.fillRect(0, 0, canvas.width, canvas.height);

            RunRenderBounds(frame, drawSet);

            drawSet.draw(cx, 0);
        })(this.renderFrames);
    }

    gatherInput() {
        return this.buttons.getPressed();
    }

    initState(patch: Partial<Data>) {
        const newState = new Data();

        Create(newState, {
            location: new Location({
                X: 200,
                Y: 200,
            }),
            bounds: new Polygon([-30, 0, 30, 0, 0, 40]),
            renderBounds: new RenderBounds("#a0f", 0),
        });

        return newState;
    }

}