<div id="app" :style="styleObj">
  <div class="container">
    <div class="content bg-white rounded px-5 py-4 border border-secondary">
      <h2>CSS Grid-ient</h2>
      <h5 class="font-weight-light">Grid Patterns Made From CSS Gradients</h5>
      <div class="mt-4 mb-4">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="colorBox" v-model="showColor">
          <label class="form-check-label" for="colorBox">Color</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="tinyBox" v-model="tiny">
          <label class="form-check-label" for="tinyBox">Thinner</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="thickBox" v-model="thick">
          <label class="form-check-label" for="thickBox">Thicker</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="chaosBox" v-model="chaos">
          <label class="form-check-label" for="chaosBox">Chaos</label>
        </div>
      </div>
      <div class="btn-row mt-4 mb-4">
        <button class="btn btn-dark mr-2" @click="randomize()">Randomize</button>
        <button class="btn btn-dark" @click="copyCSS()">Copy CSS</button>
      </div>
      <footer>
        <a class="text-dark link-underlined" href="https://www.gradientmagic.com" target="_blank">More Fantastic Gradients</a>
      </footer>
    </div>
  </div>
</div>
<div id="copyBox"></div>

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.link-underlined {
  text-decoration: underline;
}

// https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
function selectText(node) {
    node = document.getElementById(node);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

// Inclusive of bounds - [min, max]
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function sample(arr){
  return arr[getRandomInt(0, arr.length - 1)];
}

function randomColorStringRGB(transparency = 1, grayscale = false){
    let r = getRandomInt(0,256);
    let g = getRandomInt(0,256);
    let b = getRandomInt(0,256);


    if(grayscale){
      g = r;
      b = r;
    }

    if(transparency == 1) return `rgb(${r}, ${g}, ${b})`

    return `rgba(${r}, ${g}, ${b}, ${transparency})`
}


var vm = new Vue({
  el: "#app",
  data: {
    gridSize: 2,
    gridColor: '#333',
    fillSize: 40,
    fillColor: 'white',
    gradient: '',
    angle: 0,
    showColor: true,
    chaos: false,
    tiny: false,
    thick: false,
  },
  created(){
    this.randomize();
    this.generateGradient();
  },
  methods: {
    generateGradient(){
      let gridSize = this.gridSize;
      let fillSize = this.fillSize;
      let angle = this.angle;
      let fillColor = this.fillColor;
      let gridColor = this.gridColor;
      
      this.gradient = `repeating-linear-gradient(${this.angle}deg, ${gridColor} 0px, ${gridColor} ${gridSize}px,  transparent ${gridSize}px, transparent ${gridSize + fillSize}px), repeating-linear-gradient(${this.angle + 90}deg, ${gridColor} 0px, ${gridColor} ${gridSize}px,  transparent ${gridSize}px, transparent ${gridSize + fillSize}px), linear-gradient(${getRandomInt(0,360)}deg, ${fillColor}, ${fillColor})`
    },
    stackGradient(){
      let gridSize = this.gridSize;
      let fillSize = this.fillSize;
      let angle = this.angle;
      let gridColor = this.gridColor;
      
      this.gradient = `repeating-linear-gradient(${this.angle}deg, ${gridColor} 0px, ${gridColor} ${gridSize}px,  transparent ${gridSize}px, transparent ${gridSize + fillSize}px), repeating-linear-gradient(${this.angle + 90}deg, ${gridColor} 0px, ${gridColor} ${gridSize}px,  transparent ${gridSize}px, transparent ${gridSize + fillSize}px), ${this.gradient}`
    },
    randomize(){
      this.randomizeParameters();
      this.randomizeColors();
      this.generateGradient();
      
      if(this.chaos){
        let randomizeAngle = getRandomInt(0,3);
        for(let i=0; i<getRandomInt(1,3); i++){
          this.randomizeParameters();
          this.randomizeColors();
          if(randomizeAngle == 0) this.angle = getRandomInt(0,360);
          this.stackGradient();
        }
      }      
    },
    randomizeParameters(){
      
      this.gridSize = getRandomInt(1,20);
      this.fillSize = getRandomInt(5,170);
      
      if(this.tiny){
        this.gridSize = getRandomInt(1,4);
        this.fillSize = getRandomInt(5,40);
      }
      else if (this.thick){
        this.gridSize = getRandomInt(20,40);
        this.fillSize = getRandomInt(8,90);
      }
      
      this.angle = sample([0,45, 90, 135, 180]);
      //this.angle = sample([0,45, 67.5, 90, 112.5, 135, 157.5, 180]);
      // this.angle = getRandomInt(0,360)
    },
    randomizeColors(){    
      let h = getRandomInt(0,360);
      let s = getRandomInt(0,100);
      let v = getRandomInt(0,100);
      let v2 = getRandomInt(0,100);
      
      if(!this.showColor){
        s = 0;
      }

      this.gridColor = `hsl(${h},${s}%,${v}%)`
      this.fillColor = `hsl(${h},${s}%,${v2}%)`
    },
    copyCSS(){
      let copyBox = document.querySelector('#copyBox');
      copyBox.style['display'] = 'block';
      copyBox.innerHTML = this.gradient;
      selectText('copyBox')
      document.execCommand('copy');
      copyBox.style['display'] = 'none';
      toastr.success('CSS Copied to Clipboard')
    },
  },
  watch: {
     thick: function(newVal){
       if(newVal) this.tiny = false;
     },
     tiny: function(newVal){
       if(newVal) this.thick = false;
     }
  },
  computed: {
    styleObj(){
      return {
        backgroundImage: this.gradient
      }
    }
  }
})