const AfterMenu = {
    Exit: 0,
    Start: 1,
};

class Menu extends Screen {
    constructor(canvas) {
        super(canvas);

        this.addEventListener('touchstart', (event) => {
            this.onTouchStart(event);
        });
    }

    render() {
        this.clear();
        this.drawBackground();
        this.drawTitle();
        this.drawMenu();
    }

    drawTitle() {
        this.context.font = "50px Dimbo";
        this.context.stokeStyle = 'rgb(0, 0, 0)';
        this.context.fillStyle = 'rgb(255, 255, 255)';

        let text = "Escalator";
        let size = this.context.measureText(text).width;
        let offset = (this.width() - size) / 2;

        this.context.fillText(text, offset, 0.1 * this.width() + 50);
        this.context.strokeText(text, offset, 0.1 * this.width() + 50);
    }

    drawMenu() {
        this.context.font = "30px Dimbo";
        this.context.fillStyle = 'rgb(255, 255, 255)';

        let text = "New Game";
        let box = this.newGameBox();
        this.context.fillText(text, box.x, box.y + 30);
        this.context.strokeText(text, box.x, box.y + 30);

        // this.context.beginPath();
        // box = this.enlargeBox(box);
        // this.context.rect(box.x, box.y, box.width, box.height);
        // this.context.stroke();

        text = "Exit";
        box = this.exitBox();
        this.context.fillText(text, box.x, box.y + 30);
        this.context.strokeText(text, box.x, box.y + 30);

        // this.context.beginPath();
        // box = this.enlargeBox(box);
        // this.context.rect(box.x, box.y, box.width, box.height);
        // this.context.stroke();
    }

    drawBackground() {
        this.context.fillStyle = 'rgb(255, 0, 0)';
        this.context.beginPath();
        this.context.rect(0, 0, this.width(), this.height());
        this.context.fill();
    }

    newGameBox() {
        this.context.font = "30px Dimbo";
        let text = "New Game";
        let size = this.context.measureText(text);
        let offset = (this.width() - size.width) / 2;

        return {
            x: offset,
            y: 0.5 * this.height(),
            width: size.width,
            height: 30,
        };
    }

    exitBox() {
        this.context.font = "30px Dimbo";
        let text = "Exit";
        let size = this.context.measureText(text);
        let offset = (this.width() - size.width) / 2;

        return {
            x: offset,
            y: 0.7 * this.height(),
            width: size.width,
            height: 30,
        };

    }

    onTouchStart(event) {
        let e = event.changedTouches[0];

        let box = this.enlargeBox(this.newGameBox());
        if (isInBox(position(e), box)) {
            this.status = Status.Finished;
            this.after = AfterMenu.Start;
        }

        box = this.enlargeBox(this.exitBox());
        if (isInBox(position(e), box)) {
            this.status = Status.Finished;
            this.after = AfterMenu.Exit;
        }
}

    enlargeBox(box) {
        return {
            x: box.x - box.width * 0.1,
            y: box.y - box.height * 0.1,
            width: box.width * 1.2,
            height: box.height * 1.4,
        }
    }
}