var canvas: HTMLCanvasElement;
var context: CanvasRenderingContext2D;

interface iShape {
    draw(fill: boolean): void;
    x: number;
    y: number;
    color: string;
    lineWidth: number;
}

class Point {
    public x: number;
    public y: number;
}

enum Direction {
    Left,
    Right,
    Up,
    Down
}

var SnakeDirection: Direction = Direction.Right;

class cCircle implements iShape {

    public x: number;
    public y: number;
    public radius: number;
    public lineWidth: number;
    public color: string;

    constructor(x: number, y: number, radius: number, lineWidth: number = 2, color: string = "red") {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.lineWidth = lineWidth;
        this.color = color;
    }

    public draw = (fill: boolean = false): void => { //ten zapis pozwala używać słowa 'this' inaczej działa to źle
        context.save();
        context.beginPath();
        context.strokeStyle = this.color;
        context.lineWidth = this.lineWidth;
        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);

        context.stroke();

        if (fill) {
            context.fillStyle = this.color;
            context.fill();
        }

        context.restore();
    }

}

class SnakeSegment {
    private position: Point;
    private circle: cCircle;

    constructor(position: Point) {
        this.position = position;
        this.circle = new cCircle(position.x, position.y, 10, 2, "red");
        this.circle.draw(true);
    }

    public moveTo = (position: Point) => {

        if (SnakeDirection === Direction.Left) {
            this.circle.x--;
        }
        else if (SnakeDirection === Direction.Right) {
            this.circle.x++;
        }
        else if (SnakeDirection === Direction.Down) {
            this.circle.y++;
        }
        else if (SnakeDirection === Direction.Up) {
            this.circle.y--;
        }

        this.circle.draw(true);
    }

    private clearLastPosition() {

    }
}

class Snake
{
    private segmentsCount: number = 0;
}

var circle1: cCircle = new cCircle(200, 300, 50);
var circle2: cCircle = new cCircle(400, 550, 150, 5, "blue");

var point: Point = new Point();
point.x = 100;
point.y = 200;

var snake: SnakeSegment;

function gameLoop() {
    requestAnimationFrame(gameLoop);
    drawEmptyGameBorder();
    snake.moveTo(point);
    circle1.draw();
    circle2.draw();



}

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 37) {
        SnakeDirection = Direction.Left;
    }
    else if (event.keyCode === 39) {
        SnakeDirection = Direction.Right;
    }
    else if (event.keyCode === 38) {
        SnakeDirection = Direction.Up;
    }
    else if (event.keyCode === 40) {
        SnakeDirection = Direction.Down;
    }
});

function drawEmptyGameBorder() {

    //draw white rect
    context.fillStyle = "white";
    context.fillRect(0, 0, 1280, 720);

    //draw border around rect
    context.beginPath();

    context.lineWidth = 10;
    context.moveTo(0, 0);
    context.lineTo(1280, 0);
    context.lineTo(1280, 720);
    context.lineTo(0, 720);
    context.lineTo(0, 0);

    context.strokeStyle = "red";
    context.stroke();
}

window.onload = () => {
    canvas = document.getElementById("cnvs") as HTMLCanvasElement ;
    context = canvas.getContext("2d");
    snake = new SnakeSegment(point);
    gameLoop();
}