const COLOR_NORMAL = '#555'
const COLOR_DISABLED = '#aaa'
const COLOR_HOVER = '#222'
const COLOR_LABEL = '#888'

export default class MenuItem {
    constructor(data = {}) {
        this.text = data.text || ''
        this.x = data.x || 0
        this.y = data.y || 0
        this.width = data.width || 0
        this.height = data.height || 0
        this.size = data.size || 24
        this.disabled = data.disabled || false
        this.action = data.action || ''
        this.align = data.align || 'center'
        this.border = data.border || false
        this.type = data.type || 'button'
        this.data = data.data || {}
        this.icon = data.icon || null
    }

    draw(ctx, hovered = false) {
        ctx.textAlign = this.align
        ctx.textBaseline = 'middle'

        const size = hovered ? this.size * 1.01 : this.size

        ctx.font = `bold ${size}px Lato`

        const color = this.getColor(hovered)
        ctx.fillStyle = color
        ctx.fillText(this.text, this.x, this.y)

        if (this.icon) {
            ctx.drawImage(this.icon, this.x - 20, this.y - 15, 20, 20)
        }

        if (this.border) {
            ctx.strokeStyle = color
            ctx.strokeRect(this.x - this.width/2, this.y - this.height/2, this.width, this.height - 3)
        }
    }

    getColor(hovered) {
        if (this.type === 'label') return COLOR_LABEL
        if (this.disabled) return COLOR_DISABLED
        if (hovered) return COLOR_HOVER
        return COLOR_NORMAL
    }

    isDisabled() {
        return this.disabled
    }

    isUnderCursor(x, y) {
        return Math.abs(x - this.x) < this.width / 2 && Math.abs(y - this.y) < this.height / 2
    }
}
