import { canvas, draw_rect, draw_text } from "$/client/renderer/mod.ts";

const LINE_HEIGHT = 24;
const VISIBLE_SECONDS = 10;
const MAX_LINES = 10;
const MAX_HISTORY = 100;

interface ChatLine {
	text: string;
	time: number;
}

// the chat log, like minecraft's ChatComponent
export class ChatComponent {
	lines: ChatLine[] = [];

	add(text: string) {
		this.lines.push({ text, time: performance.now() });
		if (this.lines.length > MAX_HISTORY) {
			this.lines.shift();
		}
	}

	// above the bottom left corner. `all` shows old messages too, for when the chat is open
	render(all: boolean, bottom = canvas.height - 100) {
		const now = performance.now();
		const lines = this.lines
			.filter((line) => all || now - line.time < VISIBLE_SECONDS * 1000)
			.slice(-MAX_LINES);

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