console.log("BALLLLLLLLS");

let canvas = document.getElementById('scene');
let ctx = canvas.getContext("2d");


let resizeCanvas = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;  
}
resizeCanvas()


let onResize = (event) => {
  resizeCanvas()
}

window.addEventListener('resize', onResize);

let touché = 100000000;
//let hitSound = new Audio("/user/themes/quark/images/son/hit.mp3");


let tps = 0;
let timer = setInterval(() => {
  tps++;
  console.log(tps);
  if (tps <= 0) {
    clearInterval(timer);
    console.log("NOOOO TIME");
  }
}, 1000);

// let tps = 60;
// let timer = null;

// let tpsTableau = [10, 30, 60, 120];
// const ui = document.getElementById("ui");

// tpsTableau.forEach(valeur => {
//   const bouton = document.createElement("button");
//   bouton.textContent = `${valeur} sec`;
//   bouton.dataset.time = valeur;

//   bouton.addEventListener("click", () => {
//     console.log("CA CLIQUE OUUUUU");
//     lancerTimer(valeur);
//   });

//   ui.appendChild(bouton);
// });

// function lancerTimer(valeur) {
//   clearInterval(timer); // stop ancien timer
//   tps = valeur;

//   timer = setInterval(() => {
//     tps--;

//     if (tps <= 0) {
//       clearInterval(timer);
//       tps = 0;
//       console.log("NOOOO TIME");
//     }
//   }, 1000);
// }

  


class P1 {
    constructor(x, y, s) {
      this.pos = {
        x: x,
        y: y
      }
      this.size = s
      this.vx = 20
      this.vy = 20
      // this.img = new Image();
      // this.img.onload = () => {
      //   this.draw();
      // };
      // this.img.src = "/user/themes/quark/images/perso.png";
      // console.log("img", this.img.src);  
      this.imgNormal = new Image();
      this.imgNormal.src = "/user/themes/quark/images/perso.png";

      this.imgsad = new Image();
      this.imgsad.src = "/user/themes/quark/images/persosad.png";

      this.img = this.imgNormal;

      this.isTouched = false;

    }
  
    draw() {
      ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
    }

    bong(){
        // if(this.pos.x >= canvas.width || this.pos.x <= 0){
        //     this.pos.x = 0;          
        //     this.vx = Math.abs(this.vx); 
        //     // this.vx = -this.vx;
        //     console.log("ça touche :(");
        //   }
        // if(this.pos.y >= canvas.height || this.pos.y <= 0){
        //     this.vy = -this.vy;
        //     console.log("ça touche :(");
        // } 
        if (this.pos.x <= 0) {
            this.pos.x = 0; 
            // this.vx = Math.abs(this.vx); 
        }
          
        if (this.pos.x >= canvas.width-50) {
            this.pos.x = canvas.width-50;
            // this.vx = -Math.abs(this.vx);
        }
        if (this.pos.y <= 0) {
            this.pos.y = 0;
            // this.vy = Math.abs(this.vy); 
        }   
        if (this.pos.y >= canvas.height-50) {
            this.pos.y = canvas.height-50;
            // this.vy = -Math.abs(this.vy); 
        }
        
        this.draw();
    }
    
    hit() {
      if (this.isTouched) return;
    
      this.isTouched = true;
      this.img = this.imgsad;
    
      setTimeout(() => {
        this.img = this.imgNormal;
        this.isTouched = false;
      }, 400); 
    }
    
}
  
let p1 = [];
let monP1;
  function createP1() {
    monP1 = new P1(
      canvas.width/2,
      canvas.height/2,
      50
    );
    monP1.draw() ; 
    p1.push(monP1);
}
  
createP1();  
let hitSound;

window.addEventListener("keydown", (event) => {
    if (!hitSound) {
      hitSound = new Audio("/user/themes/quark/images/son/hit.mp3");
    }

    if (event.key === "ArrowLeft") {
      monP1.pos.x -= monP1.vx
      //console.log("gauche");
    }
  
    if (event.key === "ArrowRight") {
      monP1.pos.x += monP1.vx
      //console.log("droite");
    }
    
    if (event.key === "ArrowUp") {
        monP1.pos.y -= monP1.vy
        //console.log("haut");
    }
    if (event.key === "ArrowDown") {
        monP1.pos.y += monP1.vy
        //console.log("bas");
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    monP1.draw();
    monP1.bong();
});

class Boule {
    constructor(x, y, s) {
      // this.x = x;
      // this.y = y;
      this.pos = {
        x: x,
        y: y
      }
      this.size = s
      this.vx = -10+Math.random()*10;
      this.vy = -10+Math.random()*10;
      // this.color = 'hsl(360, 50%, 50%)'
      this.color = {
        h:0,
        s:0,
        l:100
      }
    }
  
    draw(){
      ctx.globalCompositeOperation = this.blend;
      ctx.beginPath();
      ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
      ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
      ctx.fill();
    }
  
    move(){
    this.pos.x += this.vx;
    this.pos.y += this.vy;
  
      if(this.pos.x >= canvas.width || this.pos.x <= 0){
        this.vx *= -1;
      }
      if(/* this.pos.y >= canvas.height || */ this.pos.y <= 0){
        this.vy *= -1;
      }
  
      this.draw();
    }
  }
   
  let boules = [];

      
  let maboule;
  function createBoule(){
    maboule = new Boule(
      canvas.width, // Math.random()*canvas.width, 
      canvas.height, // Math.random()*canvas.height,
      2+Math.random()*10
    );
    maboule.draw();
    boules.push(maboule);
  }
  
  setInterval(()=>{
      createBoule();
  }, 500)


function collisionP1Boule(p1, boule) {
  let dx = (p1.pos.x + p1.size / 2) - boule.pos.x;
  let dy = (p1.pos.y + p1.size / 2) - boule.pos.y;

  let distance = Math.sqrt(dx * dx + dy * dy);

  return distance < (p1.size / 2 + boule.size);
}
  
let anime = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < boules.length; i++) {
    for (let j = i + 1; j < boules.length; j++) {
      let a = boules[i];
      let b = boules[j];

      let dist = Math.hypot(b.pos.x - a.pos.x, b.pos.y - a.pos.y);

      if (dist < a.size + b.size) {
        let nx = (b.pos.x - a.pos.x) / dist;
        let ny = (b.pos.y - a.pos.y) / dist;

        let vA = a.vx * nx + a.vy * ny;
        let vB = b.vx * nx + b.vy * ny;

        a.vx += (vB - vA) * nx;
        a.vy += (vB - vA) * ny;
        b.vx += (vA - vB) * nx;
        b.vy += (vA - vB) * ny;
      }
    }
  }

  for (let i = boules.length - 1; i >= 0; i--) {
    let boule = boules[i];

    boule.move();

    if (collisionP1Boule(monP1, boule)) {
      touché--;
      monP1.hit();
      console.log("touhché bouuuuuh");

      if (hitSound) {
        hitSound.currentTime = 0;
        hitSound.play();
      }

      boules.splice(i, 1);
    }
  }

  monP1.draw();

  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText("Boules touchées avant de perdre : " + touché + " (oui c'est beaucoup)", 20, 30);
  ctx.fillText("Timer : " + tps + " secondes (oupsi ça augmente)", 20, 60);
  ctx.fillText("Esquive les boules de neige :D", canvas.width - 320, 30);

  requestAnimationFrame(anime);
};

  
window.requestAnimationFrame(anime);