import { SLOT_SIZE } from "$/common/constants.ts";
import { AssetManager } from "$/client/assets.ts";
import type { Client } from "$/client/client.ts";
import type { ClientInventories } from "$/client/inventory.ts";
import { draw_item, draw_nine_slice } from "$/client/rendering/render_utils.ts";
import { canvas, draw_rect_stroke, Texture } from "$/client/renderer/mod.ts";

const PADDING = 10;
const CROSSHAIR_SIZE = 8;

// what's drawn over the world while playing, like minecraft's Gui: hotbar, crosshair and chat
export class Hud {
	render(client: Client) {
		this.#render_hotbar(client.player.inventories);
		this.#render_crosshair();
		client.chat.render(false);
	}

	#render_hotbar(inventories: ClientInventories) {
		const ui = AssetManager.instance.get<Texture>("bworld:ui");

		const hotbar_width = PADDING * 2 + SLOT_SIZE * 9;
		const hotbar_height = PADDING * 2 + SLOT_SIZE;

		const x = canvas.width / 2 - hotbar_width / 2;
		const y = canvas.height - hotbar_height;

		draw_nine_slice(ui, 160, 0, 16, 16, 4, 4, 4, 4, x, y, hotbar_width, hotbar_height);

		for (let index = 0; index < 9; index += 1) {
			const selected = inventories.hotbar_selected === index;
			draw_nine_slice(
				ui,
				selected ? 19 * 16 : 160 + 32,
				selected ? 16 : 0,
				16,
				16,
				4,
				4,
				4,
				4,
				x + PADDING + index * SLOT_SIZE,
				y + PADDING,
				SLOT_SIZE,
				SLOT_SIZE,
			);
		}

		for (let index = 0; index < 9; index += 1) {
			const item = inventories.inventory.get_item(index);
			if (item) {
				draw_item(item, x + PADDING + index * SLOT_SIZE, y + PADDING);
			}
		}
	}

	#render_crosshair() {
		draw_rect_stroke(
			(canvas.width - CROSSHAIR_SIZE) / 2,
			(canvas.height - CROSSHAIR_SIZE) / 2,
			CROSSHAIR_SIZE,
			CROSSHAIR_SIZE,
			[0, 0, 0, 0.6],
		);
	}
}