const Status = {
    Idle: 0,
    Running: 1,
    Paused: 2,
    GameOver: 3,
    Waking: 4,
    Finished: 5,
};

class Screen {

    constructor(canvas) {
        this.status = Status.Idle;
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
        this.listeners = [];
        this.autoResize();
    }

    centerFillText(text, height) {
        let width = this.context.measureText(text).width;
        let start = (this.width() - width) / 2;
        this.context.fillText(text, start, height);
    }

    centerStrokeText(text, height) {
        let width = this.context.measureText(text).width;
        let start = (this.width() - width) / 2;
        this.context.strokeText(text, start, height);
    }


    addEventListener(type, callback) {
        this.listeners.push({
            type: type,
            callback: callback,
        });
    }

    addListeners() {
        for (let listener of this.listeners) {
            document.addEventListener(listener.type, listener.callback);
        }
    }

    removeListeners() {
        for (let listener of this.listeners) {
            document.removeEventListener(listener.type, listener.callback);
        }
    }

    initialize() {
        this.autoResize();
    }

    autoResize() {
        this.resize(window.innerWidth, window.innerHeight);
    }

    resize(width, height) {
        this.canvas.width = width;
        this.canvas.height = height;
    }

    clear() {
        this.context.resetTransform();
        this.context.clearRect(0, 0, this.width(), this.height());
    }

    render() {

    }

    update(time = 0.02) {

    }

    width() {
        return this.canvas.width;
    }

    height() {
        return this.canvas.height;
    }

    drawBackground() {

    }

}