import { controls } from "./controls.js";
import { gameTime } from "./gameTime.js";

export class PauseScreen {
    constructor(canvas) {
        this.canvas = canvas;
        this.active = false;

        this.setupEventListeners();
    }

    setupEventListeners() {
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                this.pause();
            }
        });

        this.canvas.addEventListener('click', () => {
            if (!this.active || document.hidden) {
                return;
            }

            this.resume();
        });
    }

    pause() {
        if (this.active) {
            return;
        }

        this.active = true;
        controls.resetInputState();
        gameTime.pause();
    }

    resume() {
        if (!this.active) {
            return;
        }

        this.active = false;
        controls.resetInputState();
        gameTime.resume();
    }

    isActive() {
        return this.active;
    }

    draw(ctx) {
        if (!this.active) {
            return;
        }

        const width = this.canvas.clientWidth;
        const height = this.canvas.clientHeight;

        ctx.save();
        ctx.fillStyle = 'rgba(70, 70, 70, 0.5)';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = '#ffffff';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = 'bold 48px sans-serif';
        ctx.fillText('PAUSE', width / 2, height / 2);
        ctx.font = '18px sans-serif';
        ctx.fillText('Click anywhere to continue', width / 2, height / 2 + 42);
        ctx.restore();
    }
}