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

const BUTTON_WIDTH = 440;
const BUTTON_HEIGHT = 48;

// why the game stopped, like minecraft's DisconnectedScreen
export class DisconnectedScreen extends GuiScreen {
	message: string;
	back = new Button("Back to title screen", BUTTON_WIDTH, BUTTON_HEIGHT, back_to_title);

	constructor(message: string) {
		super();
		this.message = message;
	}

	on_tick(_delta: number): void {
		this.back.x = (canvas.width - BUTTON_WIDTH) / 2;
		this.back.y = canvas.height / 2 + 20;
		this.back.handle_input();
	}

	on_render(): void {
		draw_rect(0, 0, canvas.width, canvas.height, [0, 0, 0, 0.6]);
		this.#centered("Disconnected", canvas.height / 2 - 90, 4, [1, 1, 1, 1]);
		this.#centered(this.message, canvas.height / 2 - 30, TEXT_SCALE, [0.85, 0.85, 0.85, 1]);
		this.back.render();
	}

	on_close(): void {}

	#centered(text: string, y: number, scale: number, color: number[]) {
		draw_text(text, (canvas.width - measure_text(text, scale)) / 2, y - (TEXT_HEIGHT * scale) / 2, scale, color);
	}
}