import {Thing} from "../../hampsterengine/src/things";

export class MainMenuButton extends Thing {
    constructor(label, action=function(){}) {
        super();

        this.label = label;
        this.action = action;

        this.fontSize = 10;
        this.font = 'serif';

        this.bgColor = '#5f5f5f';
        this.color = '#ffffff';
    }

    draw() {
        const font = `${this.fontSize}px ${this.font}`;

        canvas.ctx.font = font;
        let text = canvas.ctx.measureText(this.label);

        const padding = this.fontSize/2;
        canvas.setFillColor(this.bgColor);

        const rectHeight = this.fontSize + padding;
        this.height = rectHeight;
        this.width = text.width + padding;
        canvas.fillRect(this.x, this.y, this.width, rectHeight);

        canvas.setFillColor(this.color);
        canvas.drawText(
            this.label, this.x + (text.width + padding)/2, this.y + rectHeight/2, {
                font: font, textBaseline: "middle", textAlign: "center"
            }
        );

        canvas.drawText("", 10, canvas.height-10, {
            textBaseline: "alphabetic"
        })
    }

    click() {
        this.action();
    }
}

export class Logo extends Thing {
    constructor(props) {
        super(props);
        this.spriteImage = null;
        this.align = 1; // 1=Center
                        // 2=Left
    }

    draw() {
        canvas.setFillColor('#efefef');
        let font = 'Times New Roman';
        let align = (function () {
            switch (this.align) {
                default: return 'center';
                case 2: return 'left';
                case 3: return  'right';
            }
        })
        canvas.drawText('Committee of', this.x, this.y, {
            textAlign: align,
            textBaseline: 'bottom',
            font: `12px ${font}`
        })
        canvas.drawText('THIRTEEN', this.x, this.y, {
            textAlign: align,
            textBaseline: 'top',
            font: `24px ${font}`
        });
    }

}