import { clearScreen, fillRect } from "./window.ts";
import { drawIcon } from "./builtins.ts";
import { COLOR } from "./colors.ts";
import { getSheet, setSheet } from "./sheet.ts";
import { mouseClick, mousePos } from "./mouse.ts";
import { reGridWithGap } from "./util.ts";
import { page } from "./viewsheets.ts";
import { useSpritesheet } from "./builtins.ts";
import { codeIcon, spriteIcon } from "./icons.ts";

const gridX = 8;
const gridY = 16;
const cellW = 8;
const cellH = 8;
const gapX = 8;
const gapY = 8;

const sheetTypes = ["code", "spritesheet"] as const;
const defaultSheetVal = {
	code: () => "",
	spritesheet: () => Array(64).fill(0).map(() => Array(64).fill(0)),
	none: () =>null,
}

const update = () => {
	if (mouseClick()) {
		const {x: mouseX, y: mouseY} = mousePos();
		const g = reGridWithGap(mouseX, mouseY, gridX, gridY, cellW, cellH, gapX, gapY);
		if (g) {
			const {x, y: _y} = g;
			const sheetType = sheetTypes[x];
			setSheet(page.activeSheet, sheetType, defaultSheetVal[sheetType]());
			page.tab = getSheet(page.activeSheet).sheet_type;
		}
	}
}
const draw = () => {
	clearScreen();
	useSpritesheet(page.activeSheet);
	fillRect(0, 8, 128, 112, COLOR.BLACK);

	// Draw the spritesheet
	sheetTypes.forEach((sheetType, i) => {
		const sx = gridX+(cellW+gapX)*(i%6);
		const sy = gridY+(cellH+gapY)*Math.floor(i/6);
		const icon = {
			code: codeIcon,
			spritesheet: spriteIcon,
			none: null,
		}[sheetType];
		drawIcon(sx, sy, icon, COLOR.BLUE);
	});
}

export const nonetab = {
	update,
	draw,
}