<div id="ccc"></div>

<div id="config">
  <div class="config-wrap">
    <label
      id="num-particles-label"
      for="num-particles"
    >
      Num Particles (200)
    </label>
    <input
      type="range"
      min="50"
      max="400"
      id="num-particles"
      name="num-particles"
      value="200"
    />
  </div>
  <div class="config-wrap">
    <label
      id="line-width-label"
      for="line-width"
    >
      Line width (1)
    </label>
    <input
      type="range"
      min="1"
      max="20"
      id="line-width"
      name="line-width"
      value="1"
    />
  </div>
  <div class="config-wrap">
    <label
      id="min-dist-label"
      for="min-dist"
    >
      Min dist (50)
    </label>
    <input
      type="range"
      min="1"
      max="100"
      step="1"
      id="min-dist"
      name="min-dist"
      value="50"
    />
  </div>
  <div class="config-wrap">
    <label
      id="stroke-color-label"
      for="stroke-color"
    >
      Stroke Color (#2980b9)
    </label>
    <input
      type="color"
      min="1"
      max="20"
      step="1"
      id="stroke-color"
      name="stroke-color"
      value="#2980b9"
    />
  </div>
  <div class="config-wrap">
    <label
      id="fill-color-label"
      for="fill-color"
    >
      Fill Color (#2980b9)
    </label>
    <input
      type="color"
      min="1"
      max="20"
      step="1"
      id="fill-color"
      name="fill-color"
      value="#2980b9"
    />
  </div>
</div>

<script id="c" type="text/worklet">
  const PAINTLET_NAME = 'dots-connections'

  class CSSPaintlet {
    static get inputProperties() {
      return [
        `--${PAINTLET_NAME}-line-width`,
        `--${PAINTLET_NAME}-stroke-color`,
        `--${PAINTLET_NAME}-fill-color`,
        `--${PAINTLET_NAME}-connection-min-dist`,
        `--${PAINTLET_NAME}-count`,
      ]
    }

    paint(ctx, paintSize, props, args) {
      const lineWidth = Number(props.get(`--${PAINTLET_NAME}-line-width`))
      const minDist = Number(props.get(`--${PAINTLET_NAME}-connection-min-dist`))
      const strokeColor = props.get(`--${PAINTLET_NAME}-stroke-color`)
      const fillColor = props.get(`--${PAINTLET_NAME}-fill-color`)
      const numParticles = Number(props.get(`--${PAINTLET_NAME}-count`))
      
      console.log(props)
      
      const particles = new Array(numParticles).fill(null).map(_ => ({
        x: Math.random() * paintSize.width,
        y: Math.random() * paintSize.height,
        radius: 2 + Math.random() * 2,
      }))
      
      ctx.lineWidth = lineWidth
      ctx.lineJoin = 'round'
      ctx.lineCap = 'round'
      
      for (let i = 0; i < numParticles; i++) {
        const particle = particles[i]
        for (let n = 0; n < numParticles; n++) {
          if (i === n) {
            continue
          }
          const nextParticle = particles[n]
          const dx = nextParticle.x - particle.x
          const dy = nextParticle.y - particle.y
          const dist = Math.sqrt(dx * dx + dy * dy)
          if (dist < minDist) {
            ctx.strokeStyle = strokeColor
            ctx.beginPath()
            ctx.moveTo(nextParticle.x, nextParticle.y)
            ctx.lineTo(particle.x, particle.y)
            ctx.stroke()
          }
        }
        
        ctx.fillStyle = fillColor
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2)
        ctx.closePath()
        ctx.fill()
      }
      
    }
  }

  registerPaint(PAINTLET_NAME, CSSPaintlet)
</script>