import { ClientWorld } from "$/client/client_world.ts";
import { Connection } from "$/client/network.ts";
import {
	canvas,
	draw_rect,
	draw_text,
	flush_batch,
	push_box,
	set_current_texture,
	white_tex,
} from "$/client/renderer/mod.ts";

const CHAT_LINE_HEIGHT = 24;
const CHAT_VISIBLE_SECONDS = 10;
const CHAT_MAX_LINES = 10;

export function render_remote_players(connection: Connection) {
	if (connection.players.size === 0) {
		return;
	}

	flush_batch();
	set_current_texture(white_tex!);

	for (const player of connection.players.values()) {
		const [r, g, b] = player.color;
		const x = player.display_x;
		const y = player.display_y;
		const z = player.display_z;

		// body
		push_box(x - 0.3, y, z - 0.15, 0.6, 1.3, 0.3, r, g, b);
		// head
		push_box(x - 0.25, y + 1.3, z - 0.25, 0.5, 0.5, 0.5, 0.95, 0.8, 0.65);
	}

	flush_batch();
}

// draws the chat log above the bottom left corner, `all` shows old messages too (when the chat is open)
export function render_chat_log(world: ClientWorld, all: boolean, bottom = canvas.height - 100) {
	const now = performance.now();
	const lines = world.chat_log
		.filter((line) => all || now - line.time < CHAT_VISIBLE_SECONDS * 1000)
		.slice(-CHAT_MAX_LINES);

	let y = bottom - lines.length * CHAT_LINE_HEIGHT;
	for (const line of lines) {
		draw_rect(0, y, 600, CHAT_LINE_HEIGHT, [0, 0, 0, 0.4]);
		draw_text(line.text, 4, y, 2, [1, 1, 1, 1]);
		y += CHAT_LINE_HEIGHT;
	}
}