import { randomInt } from 'https://unpkg.com/randomness-helpers@0.0.1/dist/index.js';
import { spline } from 'https://unpkg.com/@georgedoescode/spline@1.0.1/spline.js';

const gridWidth = 850;
const gridHeight = 1100;

  const frameSize = 100;


function circle({ x, y, r, className }) {
  return `
    <circle 
      cx="${x}" 
      cy="${y}" 
      r="${r}" 
      class="${className}"
    />
  `;
}

function circleGroup({x, y, r }) {
  // We'll store all our circles in an array.
  const circles = [];

  // First, draw a circle with a white background but no border.
  // This will hide any elements behind the circle.
  circles.push(circle({ x, y, r, className: 'fill' }));

  // Decide how much space to put between our circles.
  const gap = 20;

  // Draw a number of circles, making each one smaller than the last
  // until we hit a radius of 0.
  let circleSize = r;
  while(circleSize > 0) {
    circles.push(circle({ x, y, r: circleSize, className: 'stroke' }));
    
    circleSize -= gap;
  }

  // Return all our circles as a single string;
  return circles.join('');
}

function squigglyLine(x, squiggleWidth, squiggleHeight) {
  const points = [];
  
  // Define an offset for how far the points should
  // be placed from the center of our line.
  let xOffset = squiggleWidth / 2;
  
  for(
    // Start slightly above the edge of our canvas
    let y = -1 * squiggleHeight; 
    // End slightly below the bottom
    y <= gridHeight + squiggleHeight; 
    // Iterate down, adding new points to our array
    y += squiggleHeight
  ) {
    // Add a new point.
    // Adjust our x value by our offset;
    points.push({y, x: x + xOffset});
    // Flip our x offset so the next point is 
    // placed on the other side of our center line.
    xOffset *= -1;
  }
  
  // Use our points to build a path
  return `
    <path d="${spline(points)}" class="stroke" />
  `;
}

const patternEl =  document.querySelector('.pattern');

function draw() {
  const circleGroups = [];
  for (let i = 0; i < randomInt(12, 24); i++) {
    circleGroups.push(circleGroup({
      x: randomInt(0, gridWidth),
      y: randomInt(0, gridHeight),
      r: randomInt(80, 240)
    }))
  }
  
  const lines = [];
  const lineGap = randomInt(15, 25);
  const squiggleWidth = randomInt(10, 15);
  const squiggleHeight = randomInt(60, 90);
  for(let x = lineGap * -1; x < gridWidth + lineGap; x += lineGap) {
    lines.push(squigglyLine(x, squiggleWidth, squiggleHeight));
  }
  
  patternEl.innerHTML = lines.join('') + circleGroups.join('') + `
    <rect fill="#fff" x="-500" y="-500" width="620" height="${
      gridHeight + 1000
    }"/>
    <rect fill="#fff" x="${
      gridWidth - frameSize - 20
    }" y="-500" width="620" height="${gridHeight + 1000}"/>
    <rect fill="#fff" x="-500" y="-500" width="${
      gridWidth + 1000
    }" height="620"/>
    <rect fill="#fff" x="-500" y="${gridHeight - frameSize - 20}" width="${
    gridWidth + 1000
  }" height="600"/>
    <rect
      class="stroke"
      x="${frameSize}" 
      y="${frameSize}"
      width="${gridWidth - frameSize * 2}"
      height="${gridHeight - frameSize * 2}"
    />
        <rect
      class="stroke"
      x="${frameSize + 20}" 
      y="${frameSize + 20}"
      width="${gridWidth - frameSize * 2- 40}"
      height="${gridHeight - frameSize * 2 - 40}"
    />
  `;;
}

draw();

document.querySelector('button').addEventListener('click', draw);