import { clearScreen, fillRect } from "./window.ts";
import { codetab } from "./codetab.ts";
import { spritetab } from "./spritetab.ts";
import { COLOR } from "./colors.ts";
import { mouseClick, mousePos } from "./mouse.ts";
import { drawIcon } from "./builtins.ts";
import { inRect } from "./util.ts";

type TabName = "code" | "sprite" | "map" | "sfx" | "music";

let tab: TabName = "sprite";

const codeIcon = [
	0, 0, 0, 0, 0, 0, 0, 0,
	0, 0, 1, 0, 0, 1, 0, 0,
	0, 1, 1, 0, 0, 1, 1, 0,
	0, 1, 0, 0, 0, 0, 1, 0,
	0, 1, 0, 0, 0, 0, 1, 0,
	0, 1, 1, 0, 0, 1, 1, 0,
	0, 0, 1, 0, 0, 1, 0, 0,
	0, 0, 0, 0, 0, 0, 0, 0,
];

const spriteIcon = [
	0, 0, 0, 0, 0, 0, 0, 0,
	0, 0, 1, 1, 1, 1, 0, 0,
	0, 1, 1, 0, 1, 1, 1, 0,
	0, 1, 1, 1, 1, 0, 0, 0,
	0, 1, 1, 1, 0, 0, 0, 0,
	0, 1, 1, 1, 1, 1, 1, 0,
	0, 0, 1, 1, 1, 1, 0, 0,
	0, 0, 0, 0, 0, 0, 0, 0,
];

const buttons: Array<{update: () => void, draw: () => void}> = [];
const makeTabButton = (tabname: TabName, x: number, y: number, icon: Array<number>) => {
	buttons.push({
		update() {
			if (mouseClick()) {
				const {x: mouseX, y: mouseY} = mousePos();
				if (inRect(mouseX, mouseY, x, y, 8, 8)) {
					tab = tabname;
				}
			}
		},
		draw() {
			drawIcon(x, y, icon, tab === tabname ? COLOR.YELLOW : COLOR.WHITE);
		}
	})
}

makeTabButton("code", 88, 0, codeIcon);
makeTabButton("sprite", 88+8, 0, spriteIcon);

const update = () => {
	buttons.forEach(button => button.update());
	if (tab === "code") {
		codetab.update();
	} else if (tab === "sprite") {
		spritetab.update();
	}
}

const draw = () => {
	clearScreen();
	if (tab === "code") {
		codetab.draw();
	} else if (tab === "sprite") {
		spritetab.draw();
	}
	fillRect(0, 0, 128, 8, COLOR.RED);
	fillRect(0, 120, 128, 8, COLOR.RED);
	buttons.forEach(button => button.draw());
}

export const editmode = {
	update,
	draw,
}