import type { Client } from "$/client/client.ts";
import { DebugUI } from "$/client/debug_ui.ts";

// f3: every entity's fields, editable
export class DebugOverlay {
	render(client: Client) {
		DebugUI.begin("Entities", 10, 10, 300);

		for (const entity of client.level.entities.values()) {
			if (DebugUI.collapsing_header(`${entity.constructor.name} - ${entity.id}`)) {
				this.#render_fields(entity);
			}
		}
		if (DebugUI.collapsing_header("Camera")) {
			this.#render_fields(client.camera);
		}
		if (DebugUI.collapsing_header("Options")) {
			this.#render_fields(client.options);
		}

		DebugUI.end();
	}

	// deno-lint-ignore no-explicit-any
	#render_fields(object: any) {
		for (const key in object) {
			const value = object[key];
			if (typeof value === "number") {
				object[key] = DebugUI.float_input(key, value);
			} else if (typeof value === "string") {
				object[key] = DebugUI.text_input(key, value);
			} else if (typeof value === "boolean") {
				object[key] = DebugUI.checkbox(key, value);
			} else if (Array.isArray(value)) {
				DebugUI.text(`${key}: ${JSON.stringify(value.slice(0, 10))}`);
			} else if (value && typeof value === "object" && value.constructor !== Object) {
				// other objects like the level point back at this one, only name them
				DebugUI.text(`${key}: ${value.constructor.name}`);
			} else {
				DebugUI.text(`${key}: ${JSON.stringify(value)}`);
			}
			DebugUI.separator();
		}
	}
}