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

// Define some helper functions to randomize plant size and orbit distance
let randomPlanetSize = () => randomInt(10, 50);
let randomOrbitDistance = () => randomInt(100, 120);

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

function addPlanets(starSize) {
  let count = 0;
  let markup = '';

  // Set up our first planet
  let planetSize = randomPlanetSize();
  let orbitDistance = starSize + randomOrbitDistance();

  // Keep adding planets until a planet's orbital distance and size would lead
  // to it extending past our canvas
  while (orbitDistance + planetSize < 500) {
    // Add our new planet and its orbit path to our markup
    markup += drawOrbit(orbitDistance) + drawPlanet(planetSize, orbitDistance, count);

    // Prep our next planet so the while loop can check whether it's in bounds
    planetSize = randomPlanetSize();
    orbitDistance += randomOrbitDistance();
    count ++;
  }

  return markup;
}

function drawStar(size) {
  // Note upper range of red exceeds 360
  const hueRange = randomItemInArray([[330, 390], [40, 60], [190, 240]]);

  // Pass along chosen array as arguments
  let hue = randomInt(...hueRange);
  let hueDiff = hueRange[1] - hueRange[0];
  let hue2 = (hueRange[1] - hue > hue - hueRange[0]) ? randomInt(hue + hueDiff/2, hueRange[1]) : randomInt(hue - hueDiff/2, hueRange[0]);
  // If red is greater than 360,
  // use remainder
  if (hue > 360) {
    hue = hue - 360;
  }
  if (hue2 > 360) {
    hue2 = hue2 - 360;
  }
  const starColor = `hsl(${hue}, ${random(90, 100)}%, ${random(60, 70)}%)`;
  const starColorSaturatedAndLight = `hsl(${hue}, 100%, 60%)`;
  const backGlowColor = `hsl(${hue2}, ${random(80, 90)}%, ${random(40, 50)}%)`;
  const frontGlowColor = `hsl(${hue2}, 100%, ${random(50, 60)}%)`;
  
  return `
      ${starFilters({starColor, starColorSaturatedAndLight, frontGlowColor, backGlowColor, size})}
      ${starCircles({starColor, starColorSaturatedAndLight, frontGlowColor, backGlowColor, size})}
  `;
}

function starFilters({starColor, starColorSaturatedAndLight, backGlowColor, frontGlowColor, size}) {
  const blurFilterSize = 300;
  return `
      <defs>
        <filter id="star-main">
          <feTurbulence type="fractalNoise" baseFrequency="${size / 5000}" numOctaves="5" seed="${random(0, 100)}"/>
          <feDiffuseLighting lighting-color="${starColorSaturatedAndLight}" surfaceScale="${size / 20}">
            <feDistantLight azimuth="45" elevation="60" />
          </feDiffuseLighting>
          <feComposite operator="in" in2="SourceGraphic"/>
          <feGaussianBlur stdDeviation="${size / 100}"/>
        </filter>

        <filter
          id="star-glow" 
          filterUnits="userSpaceOnUse"
          x="0" 
          y="0" 
          height="${height}" 
          width="${width}"
        >
          <feGaussianBlur stdDeviation="${size / 5}"/>
        </filter>

        <filter
          id="star-secondary-glow" 
          filterUnits="userSpaceOnUse"
          x="${width/2 - size * blurFilterSize}" 
          y="${height/2 - size * blurFilterSize}" 
          height="${size * 2 * blurFilterSize}" 
          width="${size * 2 * blurFilterSize}"
        >
          <feGaussianBlur stdDeviation="${size / 5}"/>
        </filter>

        <filter
          id="star-turbulent-glow" 
        >
          <feTurbulence baseFrequency="${0.75 / size * 10}" seed="${random(0, 100)}"/>
          <feDiffuseLighting lighting-color="${starColorSaturatedAndLight}" surfaceScale="${1 * size / 20}">
            <feDistantLight azimuth="45" elevation="60" />
          </feDiffuseLighting>
          <feComposite operator="in" in2="SourceGraphic"/>
          <feGaussianBlur stdDeviation="${size / 30}"/>
        </filter>
      </defs>
  `;
}

function starCircles({starColor, starColorSaturatedAndLight, backGlowColor, frontGlowColor, size, isMain}) {
  const cx = width/2;
  const cy = height/2;
  
  return `
      <circle r="${size}" cx="${cx}" cy="${cy}" filter="url(#star-glow)" fill="${backGlowColor}" opacity="0.7"/ class="star-glow"/>
      <circle r="${size * 0.85}" cx="${cx}" cy="${cy}" filter="url(#star-turbulent-glow)" fill="${backGlowColor}" opacity="0.7" class="turbulent-glow"/>
      <circle r="${size * 0.8}" cx="${cx}" cy="${cy}" fill="${starColorSaturatedAndLight}"  class="flat"/>
      <circle r="${size * 0.75}" cx="${cx}" cy="${cy}" filter="url(#star-main)" opacity="0.9" class="main-turbulence"/>
      <circle r="${size * 0.74}" cx="${cx}" cy="${cy}" filter="url(#star-secondary-glow)" fill="${frontGlowColor}" opacity="0.7" class="inner-glow"/>
  `;
}

function drawPlanet(size, distance, count) {
  const hue = randomInt(0, 360);
  const saturation = randomInt(70, 100);
  const lightness = randomInt(50, 70);
  const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
  const cx =  width/2 + distance;
  const cy =  height/2;

  // We'll use the current planet number to create unique IDs for our filters
  const id = `planet-${count}`;
  
  // We'll generate some random values for our turbulence
  const turbulenceType = randomBool() ? 'fractalNoise' : 'turbulence';
  const baseFrequencyX = random(0.5, 2) / size;
  const baseFrequencyY = random(2, 4) / size;
  const numOctaves = randomInt(3, 10);
  const seed = Math.random();

  // And some random values for our lighting
  const elevation = randomInt(30, 100);
  const surfaceScale = randomInt(5, 10);

  // We'll use those random valus to create our filter:
  const defs = `
      <clipPath id="${id}-shadow-clip-path">
      <circle cx="${cx}" cy="${cy}" r="${size + 2}" />
    </clipPath>
    <radialGradient id="${id}-shadow">
      <stop offset="0%" stop-color="hsla(0, 0%, 0%, 0)"></stop>
      <stop offset="90%" stop-color="hsla(0, 0%, 0%, 1)"></stop>
    </radialGradient>
    <filter id="${id}-texture">
      <feTurbulence
        type="${turbulenceType}"
        baseFrequency="${baseFrequencyX} ${baseFrequencyY}"
        seed="${seed}"
        numOctaves="${numOctaves}"
      />
      <feDiffuseLighting lighting-color="${color}" surfaceScale="${surfaceScale}">
        <feDistantLight elevation="${elevation}" />
      </feDiffuseLighting>
      <feComposite operator="in" in2="SourceGraphic"/>
    </filter>
  `;

  // And apply the filter to our planet:
  const planet = `
    <g
      class="planet"
      style="
        --start-rotation:${randomInt(0, 360)}deg;
        --rotation-speed:${distance * randomInt(40, 70)}ms;
      "
    >
      <circle
        r="${size}" 
        cx="${cx - 1}" 
        cy="${cy}"
        fill="#fff"
      />
      <circle
        r="${size}" 
        cx="${cx}" 
        cy="${cy}"
        filter="url(#${id}-texture)"
      />
      <circle cx="${cx - size}" cy="${cy}" r="${size * 2 + 2}" fill="url(#${id}-shadow)" clip-path="url(#${id}-shadow-clip-path)"/>
    </g>
  `;

  return defs + planet;
}

function drawOrbit(distance) {
  // The orbit is centered and has a radius equal to our current distance
  return `
    <circle 
      cx="${width/2}" 
      cy="${height/2}" 
      r="${distance}" 
      stroke="#ccc"
      fill="none"
    />
  `;
}

function drawStarField() {
  const id = `star-field-`;
  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>
    </defs>
    <rect x="0%" y="0%" width="150%" height="200%" fill="url(#${id}-gradient-1)"/>
    <defs>
      <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>
    </defs>
    <rect x="100%" y="150%" width="150%" height="200%" fill="url(#${id}-gradient-2)" opacity="0.75"/>

    <filter id="${id}-bg">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" seed="${random(0, 100)}"/> 
        <feGaussianBlur stdDeviation="10"/>       
    </filter>
    <rect width="100%" height="100%" filter="url(#${id}-bg)" opacity="0.3"/>

    <filter id="${id}-stars">
      <feTurbulence baseFrequency="0.2" seed="${random(0, 100)}"/>
      <feColorMatrix values="0 0 0 9 -4
                            0 0 0 9 -4
                            0 0 0 9 -4
                            0 0 0 0 0.5"/>
    </filter>
    <rect width="100%" height="100%" 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)];
}