import { GuiScreen } from "./gui_screen.ts";
import { canvas, draw_rect, draw_text } from "$/client/renderer/mod.ts";
import { InputManager } from "../input_manager.ts";
import type { Client } from "../client.ts";
import { MAX_CHAT_LENGTH } from "$/common/protocol.ts";
import { TextInput } from "./widgets.ts";

export class GuiChat extends GuiScreen {
	client: Client;
	input = new TextInput("", MAX_CHAT_LENGTH);

	constructor(client: Client) {
		super();
		this.client = client;
	}

	override on_render(): void {
		draw_rect(0, 0, canvas.width, canvas.height, [0, 0, 0, 0.8]);

		const y = canvas.height - 32;
		this.client.chat.render(true, y - 8);
		draw_rect(0, y, canvas.width, canvas.height, [0, 0, 0, 0.4]);

		draw_text(this.input.value, 0, y, 2, [1, 1, 1]);
		draw_rect(this.input.caret_x(0, 2), y + 4, 1, 32 - 4);
	}

	override on_tick(_delta: number): void {
		this.input.handle_keys();
		if (InputManager.is_key_pressed("Enter")) {
			this.submit();
		}
	}

	override on_close(): void {}

	submit() {
		// commands like /give run on the server too
		if (this.input.value.trim().length > 0) {
			this.client.connection.send({ type: "chat", text: this.input.value });
		}
		this.client.pop_screen();
	}
}