// Define a couple variables about our SVG grid
const width = 1000;
const height = 1000;

function draw() {
  let starSize = randomInt(70, 120);
  let markup = drawStarField();
  
  document.querySelector(".js-svg-wrapper").innerHTML = markup;
}

function drawStarField() {
  const id = `starField`;
  const seed = randomInt(0, 100);
  
  return `
      ${filters({id, seed})}
      
      ${rectangles({id, isMain: true})}
      ${rectangles({id, isMain: false})}
  `;
};

const availHeight = height * 9/10;
const startHeight = height * 1/10;

function filters({id, seed}) {
  const y = height/2 - 150;
  
  return `
    <defs>
      <radialGradient id="${id}-gradient-1">
        <stop offset="0%" stop-color="hsla(${random(190, 230)}, 100%, 20%, 1)" />
        <stop offset="100%" stop-color="hsla(${random(290, 360)}, 100%, 20%, 1)" />
      </radialGradient>

      <radialGradient id="${id}-gradient-2">
        <stop offset="0%" stop-color="hsla(${random(190, 230)}, 100%, 20%, 1)" />
        <stop offset="100%" stop-color="hsla(${random(290, 360)}, 100%, 20%, 1)" />
      </radialGradient>
      <filter id="${id}-bg">
        <feTurbulence type="fractalNoise" baseFrequency="0.01" seed="${seed}"/> 
        <feGaussianBlur stdDeviation="10"/>  
        <feComposite operator="in" in2="SourceGraphic"/>     
      </filter>
      <filter id="${id}-stars">
        <feTurbulence baseFrequency="0.2" seed="${seed}"/>
        <feColorMatrix values="0 0 0 9 -4
                              0 0 0 9 -4
                              0 0 0 9 -4
                              0 0 0 0 0.5"/>
        <feComposite operator="in" in2="SourceGraphic"/>
      </filter>
      <clipPath id="${id}-clip-main">
        <rect width="300" height="300" x="${550}" y="${y}" filter="url(#${id}-bg)" />
      </clipPath>
      <clipPath id="${id}-clip-1">
        <rect width="300" height="200" x="${150}" y="${startHeight}" filter="url(#${id}-bg)"/>
      </clipPath>
      <clipPath id="${id}-clip-2">
        <rect width="300" height="200" x="${150}" y="${availHeight / 5 + startHeight}" filter="url(#${id}-bg)" />
      </clipPath>
    </defs>
  `;
}

function rectangles({id, isMain}) {
  const x = isMain ? 550 : 150;
  const y = height/2 - 150;
  
  return `
    <rect x="0" y="0" width="100%" height="100%" fill="url(#${id}-gradient-2)" opacity="0.75" clip-path="url(#${id}-clip-${isMain ? 'main' : '1'})"/>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#${id}-gradient-1)" clip-path="url(#${id}-clip-${isMain ? 'main' : '2'})"/>
    <rect x="${x}" y="${isMain ? y : availHeight / 5 * 2 + startHeight}" width="300" height="${isMain ? 300 : 200}" filter="url(#${id}-bg)" opacity="0.3"/>
    <rect x="${x}" y="${isMain ? y : availHeight / 5 * 3 + startHeight}" width="300" height="${isMain ? 300 : 200}" filter="url(#${id}-stars)"/>
   `;
}

/**
 * Initialize our art piece
 */
draw();

document.querySelector(".js-refresh-button").addEventListener("click", draw);

//
// Randomization Functions
//

// Return a number between two values.
function random(min, max) {
  const difference = max - min;
  return min + difference * Math.random();
}

// Returns a random integer between two values
function randomInt(min, max) {
  return Math.round(random(min, max));
}

// Returns true or false. By default the chance is 50/50 but you can pass in
// a custom probability between 0 and 1. (Higher values are more likely to
// return true.)
function randomBool(probability = 0.5) {
  return Math.random() > probability;
}

// Returns a random item from an array
function randomItemInArray(array) {
  return array[randomInt(0, array.length - 1)];
}