document.onmousemove = handleMouseMove;
document.onmousedown = handleMouseDown;
document.ontouchstart = handleTouchStart;
document.onmouseup = handleMouseUp;
document.ontouchend = handleTouchEnd;
document.ontouchmove = handleTouchMove;

document.onkeydown = handleKeyDown;


var acceleration = 10000
var simspeed = 4

var downX = 0
var downY = 0
var finalX = 0
var finalY = 0

var currentX = 0
var currentY = 0

particles = [
    // [
    //     [
    //         [350, 100]
    //     ],
    //     [1, 0],
    //     "orange"
    // ],
    //  [
    //      [
    //          [450, 100]
    //      ],
    //      [1, 0],
    //      "blue"
    //  ],
    //  [
    //      [
    //          [1100, 950]
    //      ],
    //      [-1, 1],
    //      "red"
    //  ]
]
points = [
    // [window.innerWidth /  2, window.innerHeight / 2]
]

function start() {
    canvas.start();
}

var canvas = {
    canvas: document.createElement("canvas"),
    start: function () {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight - 4;

        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateCanvas, 1);
        makeGravity(window.innerWidth / 2, window.innerHeight / 2)



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

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function updateCanvas() {

    variance = 20
    ctx = canvas.context
    ctx.strokeWidth = 2

    ctx.fillStyle = "white";
    
    // ctx.fillRect(0, 0, canvas.canvas.width, canvas.canvas.height);


    for (i = 0; i < particles.length; i++) {
        curPart = particles[i][0]
        curLastPart = curPart[curPart.length - 1]
        curVel = particles[i][1]

        ctx.beginPath()
        ctx.moveTo(curPart[0][0], curPart[0][1])


        //update vel
        for (j = 0; j < points.length; j++) {
            dist2 = (points[j][0] - curLastPart[0]) ** 2 + (points[j][1] - curLastPart[1] ) ** 2
            dist = Math.sqrt(dist2)
            speedup = acceleration / dist2
            
            xdist = points[j][0] - curLastPart[0]
            ydist = points[j][1] - curLastPart[1]
            

            curVel[0] += speedup * xdist / dist
            curVel[1] += speedup * ydist / dist

            newdist = Math.sqrt(curVel[0] ** 2 + curVel[1] ** 2)
        }
        



        //update new pos
        newpos = [curPart[curPart.length - 1][0] + (curVel[0]) * simspeed, curPart[curPart.length - 1][1] + (curVel[1]) * simspeed]
        

        curPart[0] = newpos

        
        // curPart.push(newpos)

        // //draw lines
        // for (j = 1; j < curPart.length; j++) {
        //     ctx.lineTo(curPart[j][0], curPart[j][1])
        //     ctx.stroke()
        // }




        //draw particle
        ctx.fillStyle = particles[i][2]
        ctx.beginPath()
        ctx.arc(
            curPart[curPart.length - 1][0],
            curPart[curPart.length - 1][1],
            5, 0, 7)
        ctx.fill()
        ctx.closePath()


    }
    // ctx.beginPath();
    // ctx.arc(100,50, 5, 0, 7)
    // ctx.strokeStyle = "black"
    // ctx.fill()





    // for(i = 0; i < paths.length; i++){

    //     ctx.beginPath()
    //     ctx.moveTo(paths[i].x, paths[i].y)
    //     rand =  Math.random()*variance*2 - variance

    //     paths[i].x = paths[i].x + rand 
    //     paths[i].y = paths[i].y + Math.sqrt(variance * variance - rand*rand)
    //     ctx.lineTo(
    //         paths[i].x ,
    //         paths[i].y 
    //     )
    //     ctx.strokeStyle = paths[i].color
    //     ctx.stroke()
    //     if(paths[i]. y > canvas.canvas.height){
    //         paths.splice(i, 1)
    //         i--
    //     }
    // }
}

function handleTouchMove(event) {
    finalX = event.touches[0].clientX //clamp(event.touches[0].pageX - canvas.canvas.getBoundingClientRect().left, 0, canvas.canvas.width)
    finalY = event.touches[0].clientY //clamp(event.touches[0].pageY - canvas.canvas.getBoundingClientRect().top, 0, canvas.canvas.height)
}

function handleMouseMove(event) {
    
    currentX = clamp(event.x - canvas.canvas.getBoundingClientRect().left, 0, canvas.canvas.width)
    currentY = clamp(event.y - canvas.canvas.getBoundingClientRect().top, 0, canvas.canvas.height)
}

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

    downX  = x
    downY = y

    
}

function handleKeyDown(event) {
    if(event.key === " "){
        makeGravity(currentX, currentY) 
    }
}

function handleMouseUp(event) {
     x = clamp(event.x - canvas.canvas.getBoundingClientRect().left, 0, canvas.canvas.width)
     y = clamp(event.y - canvas.canvas.getBoundingClientRect().top, 0, canvas.canvas.height)

    xVel = (downX - x) / 100
    yVel = (downY - y) / 100

    makeParticle(downX, downY, xVel, yVel)

}

function handleTouchStart(event){
    var thing = {
        'x': event.touches[0].clientX,
        'y': event.touches[0].clientY
    }
    handleMouseDown(thing)
}

function handleTouchEnd(event){
    event.preventDefault()
    var thing = {
        'x': finalX,
        'y': finalY
    }
    handleMouseUp(thing)
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

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

}

function normalize(pair){

}


function makeParticle(x, y, xVel, yVel){
    part = [
        [
            [x, y]
        ],
        [xVel, yVel],
        getRandomColor()
    ]
    particles.push(part)

}

function makeGravity(x, y){

    ctx = canvas.context
    
    ctx.fillStyle = "black"
    ctx.beginPath()
    ctx.arc(
        x,
        y,
        10, 0, 7)
    ctx.fill()
    ctx.closePath()
    points.push([x, y])

}