// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
function componentToHex(c) {
 var hex = c.toString(16);
 return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
 return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
} 

// [0, max)
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

function randomColorStringHex(){
  let r = getRandomInt(256);
  let g = getRandomInt(256);
  let b = getRandomInt(256); 

  return rgbToHex(r,g,b);
}

// 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.");
    }
}

var chrome = VueColor.Chrome;

var vm = new Vue({
  el: "#app",
  data: {
    bgSlider: 50,
    circleSlider: 50,
    circleColor: "#f94040",
    bgColor: "#ffffff",
    colors: '#194d33',
    showBGPicker: false,
  },
  components: {
    'chrome-picker': chrome
  },
  computed: {
    bgSize(){
      let size = Math.floor((this.bgSlider/100) * 500);
      return `${size}px ${size}px`
    },
    bgImage(){
      console.log(this.circleSlider);
      
      let smoothingConstant = 2;
      if(this.bgSlider < 15 || this.bgSlider > 85) smoothingConstant = 1;
      if(this.bgSlider < 4 || this.bgSlider > 96) smoothingConstant = 0; 
      
      return `radial-gradient(circle at center center, ${this.circleColor} ${this.circleSlider}%, ${this.bgColor} ${parseInt(this.circleSlider) + smoothingConstant}%)`
    },
    fullCSS(){
      return `background-image: ${this.bgImage}; background-size: ${this.bgSize};`
    }
  },
  methods: {
    randomize(){
      this.bgSlider = Math.floor(Math.random() * 100);
      this.circleSlider = Math.floor(Math.random() * 100);
      this.randomizeColors();
    },
    randomizeColors(){
      this.bgColor = randomColorStringHex();
      this.circleColor = randomColorStringHex();
    },
    copyCSS(){
      let copyBox = document.querySelector('#copyBox');
      copyBox.style['display'] = 'block';
      copyBox.innerHTML = this.fullCSS;
      selectText('copyBox')
      document.execCommand('copy');
      copyBox.style['display'] = 'none';
      toastr.success('CSS Copied to Clipboard')
    },
    updateColor(newVal){
      console.log(newVal);
      this.bgColor = newVal.hex;
    }
  },
  created(){
    this.randomize();
  },
});