import * as gui from './index.mjs';
import GuiElement from './element.mjs';
import GuiItemButton from './item.mjs';
import {state} from '../game/index.mjs';
import * as edit from '../game/edit.mjs';

export default class GuiEdit extends GuiElement {
	constructor(x, y, w = 100, h = 30) {
		super(x, y, w, h);
		this.type = 'edit';
		this.tileWidth = 0;
		this.tileHeight = 0;
		this.active = false;
	}

	updateTiles() {
		this.children.clear();

		[this.tileWidth, this.tileHeight] = [edit.width, edit.height];

		let tileRatio = this.tileWidth / this.tileHeight;
		let rectRatio = this.w / this.h;
		let tileSize;
		let [ox, oy] = [0, 0];

		if (tileRatio < rectRatio) {
			tileSize = this.h / this.tileHeight;
			ox = (this.w - (tileSize * this.tileWidth)) / 2;
		} else {
			tileSize = this.w / this.tileWidth;
			oy = (this.h - (tileSize * this.tileHeight)) / 2;
		}

		let spacing = 0.1 * tileSize;

		for (let x = 0; x < this.tileWidth; x++)
		for (let y = 0; y < this.tileHeight; y++) {
			let tile = this.getTile(x, y);
			let ex = x * tileSize + spacing / 2 + ox + this.x;
			let ey = y * tileSize + spacing / 2 + oy + this.y;
			let [ew, eh] = [tileSize - spacing, tileSize - spacing];

			let onclick = (button) => {
				this.tileClicked(x, y, button);
			};

			let el = new GuiItemButton(tile.module, onclick, ex, ey, ew, eh);
			this.append(el);
		}
	}

	tick() {
		if (state.editing && !this.active) this.updateTiles();
		this.active = state.editing;
		this.options.draw = this.options.drawChildren = this.active;
		if (!this.active) return;

		[this.tileWidth, this.tileHeight] = [edit.width, edit.height];
	}

	getTile(x, y) {
		let [px, py] = edit.position;
		return edit.getTile(x + px, y + py);
	}

	tileClicked(x, y, button) {
		console.log(x, y, button);
	}
}