<template>
  <canvas></canvas>
</template>

<script>
export default {
  name: 'xmpolygon',
  props: [
    'color',
    'dots',
  ],
  data() {
    return {
      interval: null,
    }
  },
  mounted() {
    if (this.$el && !this.interval) {
      this.interval = canvasMotion(this.$el, this.color, this.dots) 
    }
  },
  destroyed() {
    if (this.interval) {
      clearInterval(this.interval);
      window.onmousemove = null;
    }
  }
}

function canvasMotion(canvas, color = '#044281', dotNum = 800) {
  const ctx = canvas.getContext('2d');

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvas.style.display = 'block';

  ctx.fillStyle = color;
  ctx.lineWidth = .2;
  ctx.strokeStyle = color;

  const mousePosition = {
      x: 30 * canvas.width / 100,
      y: 30 * canvas.height / 100
  };

  const dots = {
      nb: dotNum,
      distance: 60,
      d_radius: 100,
      array: []
  };

  function Dot(){
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;

      this.vx = -.5 + Math.random();
      this.vy = -.5 + Math.random();

      this.radius = Math.random();
  }

  Dot.prototype = {
      create: function(){
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
          ctx.fill();
      },

      animate: function(){
          for(let i = 0; i < dots.nb; i++){

              const dot = dots.array[i];

              if(dot.y < 0 || dot.y > canvas.height){
                  // dot.vx = dot.vx;
                  dot.vy = - dot.vy;
              }
              else if(dot.x < 0 || dot.x > canvas.width){
                  dot.vx = - dot.vx;
                  // dot.vy = dot.vy;
              }
              dot.x += dot.vx;
              dot.y += dot.vy;
          }
      },

      line: function(){
          for(let i = 0; i < dots.nb; i++){
              for(let j = 0; j < dots.nb; j++){
                  const i_dot = dots.array[i];
                  const j_dot = dots.array[j];

                  if((i_dot.x - j_dot.x) < dots.distance 
                    && (i_dot.y - j_dot.y) < dots.distance 
                    && (i_dot.x - j_dot.x) > - dots.distance 
                    && (i_dot.y - j_dot.y) > - dots.distance) {
                      if((i_dot.x - mousePosition.x) < dots.d_radius 
                        && (i_dot.y - mousePosition.y) < dots.d_radius 
                        && (i_dot.x - mousePosition.x) > - dots.d_radius 
                        && (i_dot.y - mousePosition.y) > - dots.d_radius) {
                          ctx.beginPath();
                          ctx.moveTo(i_dot.x, i_dot.y);
                          ctx.lineTo(j_dot.x, j_dot.y);
                          ctx.stroke();
                          ctx.closePath();
                      }
                  }
              }
          }
      }
  };

  function createDots(){
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for(let i = 0; i < dots.nb; i++){
          dots.array.push(new Dot());
          dots.array[i].create();
      }

      const dot = dots.array[dots.nb - 1];
      dot.line();
      dot.animate();
  }

  window.onmousemove = function(e) {
      mousePosition.x = e.pageX;
      mousePosition.y = e.pageY;
  }

  mousePosition.x = window.innerWidth / 2;
  mousePosition.y = window.innerHeight / 2;

  return setInterval(createDots, 1000/30);
}
</script>
