var player = new player(100, 20, "red", 200, 450, );
var ball = new ball(10, "blue", 5)
var bricks = [];
var myScore;

document.onmousemove = handleMouseMove;

document.onmousedown = handleMouseDown;

var mousePos = {
    x: 200,
    y: 0
}

function startGame() {
    gameArea.start();
}

var gameArea = {
    canvas: document.createElement("canvas"),
    start: function () {
        this.canvas.width = 500;
        this.canvas.height = 500;
        this.canvas.style.marginLeft = "auto"
        this.canvas.style.marginRight = "auto"
        this.canvas.style.display = "block"

        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 10);

        makeBricks(50, 20)
    },
    clear: function () {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function makeBricks(width, height) {
    numX = gameArea.canvas.width / (width + 7)
    numY = gameArea.canvas.height / (height+ 5) / 4

    for (i = 0; i < numX; i++) {
        for (j = 0; j < numY; j++) {
            bricks.push(new brick(width, height, (width + 5) * i + 5, j * (height + 5) + 5, "green"))
        }
    }

    
}

function brick(width, height, x, y, color) {
    this.width = width
    this.height = height
    this.x = x
    this.y = y
    this.color = color
    this.active = true

    this.update = function () {
        if(this.active){
            ctx = gameArea.context
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
        
    }


}

function player(width, height, color, x, y) {
    this.width = width
    this.height = height
    this.color = color
    this.x = x
    this.y = y
    this.type = "player"

    this.update = function () {
        ctx = gameArea.context
        this.x = mousePos.x - width / 2
        ctx.fillStyle = this.color
        ctx.fillRect(this.x, this.y, this.width, this.height)
    }
}

function ball(size, color, speed) {
    this.speed = speed
    this.size = size
    this.color = color
    this.x = player.x + player.width / 2
    this.y = 450 // player.y + size + 1
    this.direction = 67

    this.reflectUpDown = function() {
        this.direction = -1 * this.direction
    }

    this.reflectLeftRight = function() {
        this.direction = 180 - this.direction
    }



    this.checkCollision = function () {
        if (this.x + this.size > gameArea.canvas.width || this.x < 0) {
            this.reflectLeftRight()
            this.x = clamp(this.x, 0, gameArea.canvas.width - this.size)
        }

        if (this.y < 0 || this.y + this.size > gameArea.canvas.height) {
            this.reflectUpDown()
            this.y = clamp(this.y, 0, gameArea.canvas.height - this.size)
        }

        if (isColliding(this.x, this.y, this.size, this.size, player.x, player.y, player.width, player.height)) {
            console.log("collide")
            this.y = player.y - this.size - 1
            this.reflectUpDown()
        }

        for(var i in bricks){
            if(bricks[i].active){
                if(isColliding(this.x, this.y, this.size, this.size, bricks[i].x, bricks[i].y, bricks[i].width, bricks[i].height)){
                    console.log("brick break")
                    bricks[i].active = false
                    this.reflectUpDown()
                }
            }
        }

    }

    this.update = function () {
        ctx = gameArea.context
        this.x = this.x + cos(this.direction) * speed
        this.y = this.y + sin(this.direction) * speed
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.size, this.size)
    }
}

function updateGameArea() {
    gameArea.clear();
    gameArea.frameNo += 1;
    ball.checkCollision()
    player.update()
    ball.update()

    for(i in bricks){
        bricks[i].update()
    }
    

}


function handleMouseMove(event) {
    mousePos.x = clamp(event.pageX - gameArea.canvas.getBoundingClientRect().left, 0, gameArea.canvas.width)
    mousePos.y = clamp(event.pageY - gameArea.canvas.getBoundingClientRect().top, 0, gameArea.canvas.height)
}

function handleMouseDown(event) {
    ball.x = clamp(event.pageX - gameArea.canvas.getBoundingClientRect().left, 0, gameArea.canvas.width)
    ball.y = clamp(event.pageY - gameArea.canvas.getBoundingClientRect().top, 0, gameArea.canvas.height)
}

function clamp(num, min, max) {
    return num <= min ? min : num >= max ? max : num
}

function cos(num) {
    return Math.cos(num * Math.PI / 180)
}

function sin(num) {
    return -1 * Math.sin(num * Math.PI / 180)
}

function isColliding(x1, y1, w1, h1, x2, y2, w2, h2) {

    return x1 < x2 + w2 &&
        x1 + w1 > x2 &&
        y1 < y2 + h2 &&
        y1 + h1 > y2

}