import type { Client } from "$/client/client.ts";
import { canvas, draw_rect, draw_text, measure_text } from "$/client/renderer/mod.ts";
import { GuiScreen } from "./gui_screen.ts";
import { Button, TEXT_HEIGHT } from "./widgets.ts";

const BUTTON_WIDTH = 440;
const BUTTON_HEIGHT = 48;
const GAP = 16;

// escape while playing, like minecraft's PauseScreen. the server keeps going, it's only a menu
export class PauseScreen extends GuiScreen {
	buttons: Button[];

	constructor(client: Client) {
		super();
		this.buttons = [
			new Button("Back to game", BUTTON_WIDTH, BUTTON_HEIGHT, () => client.pop_screen()),
			new Button("Disconnect", BUTTON_WIDTH, BUTTON_HEIGHT, () => client.disconnect()),
		];
	}

	on_tick(_delta: number): void {
		let y = canvas.height / 2 - BUTTON_HEIGHT;
		for (const button of this.buttons) {
			button.x = (canvas.width - BUTTON_WIDTH) / 2;
			button.y = y;
			y += BUTTON_HEIGHT + GAP;
		}
		for (const button of this.buttons) {
			if (button.handle_input()) {
				break;
			}
		}
	}

	on_render(): void {
		draw_rect(0, 0, canvas.width, canvas.height, [0, 0, 0, 0.5]);
		const title = "Game menu";
		draw_text(title, (canvas.width - measure_text(title, 4)) / 2, this.buttons[0].y - 40 - TEXT_HEIGHT * 4, 4);
		for (const button of this.buttons) {
			button.render();
		}
	}

	on_close(): void {}
}