<div id="app">
  <select name="" id="type" v-model="mode" >
    <option value="analogous">Analogous</option>
    <option value="monochromatic">Monochromatic</option>
    <option value="triad">Triad</option>
    <option value="complementary">Complementary</option>
    <option value="split_complementary">Split Complementary</option>
    <option value="double_split_complementary">Double Split Complementary</option>
    <option value="square">Square</option>
    <option value="compound">Compound</option>
    <option value="shades">Shades</option>
  </select>
 
  <div class="colors">
    <color :num="1"></color>
    <color :num="2"></color>
    <color :num="3"></color>
    <color :num="4"></color>
    <color :num="5"></color>

  </div>

</div>

<template id="colorTemplate">
  <div class="colorwidget">
    <div class="color" :style="{ 'background-color': `rgb(${red}, ${green}, ${blue})`}">{{hexcolor}}{{hslcolor}} </div>
    <div class="ranges">
      <input type="range" min="0" max="255" v-model="red" @input="numchanged(num,hslcolor)">
      <input type="number" v-model="red" min="0" max="255" @change="numchanged(num,hslcolor)">
    </div>
    <div class="ranges">
      <input type="range" min="0" max="255" v-model="green" @input="numchanged(num,hslcolor)">
      <input type="number" v-model="green" min="0" max="255" @change="numchanged(num,hslcolor)" >
    </div>
    <div class="ranges">
      <input type="range" min="0" max="255" v-model="blue" @input="numchanged(num,hslcolor)">
      <input type="number" v-model="blue" min="0" max="255" @change="numchanged(num,hslcolor)">
    </div>
  </div>
</template>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#app {
  
  width: 100vw;
  height: 100vh;
}
body {
  background: #17161b;
}


.colors {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat( 5, minmax(100px, 1fr) );
  margin: 0 10px;
  
}
.colorwidget {
  height: 300px;
  display: flex;
  flex-direction: column;
  
}
.color {
  width: 100%;
  height: 300px;
  margin: 0 auto;
}
.ranges {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
input {
  margin-top: 7px;
}
#type {
  margin-left: 30px;
  margin-top: 30px;
}

const store = new Vuex.Store({
  state: {
    colornum: 1,
    mode: "shades",
    mainhsl: [ 0, 0, 78.4 ],
  },
  getters: {
    colornum(state) {
      return state.colornum;
    },
    mode(state) {
      return state.mode;
    },
    mainhsl(state) {
      return state.mainhsl;
    },
  },
  mutations: {
    setColor(state, payload) {
      state.colornum = payload.numb;
      state.mainhsl = payload.hsl;
    },
    setMode(state, payload) {
      state.mode = payload;
    },

  },
  actions: {
    setColor({ commit }, payload) {
      commit("setColor", payload);
    },
    setMode({ commit }, payload) {
      commit("setMode", payload);
    },
  }
});


Vue.component("color", {
  props: {
    num: String
  },
  template: "#colorTemplate",
  data() {
    return {
      red: 200,
      green: 200,
      blue: 200
    };
  },
  methods: {
    numchanged: function (n,color) {
      
      this.$store.dispatch("setColor", {numb: n, hsl: color});
    },
    hsltorgb: function(hslcolval,changevalue) {
      h = hslcolval[0]+changevalue[0];
      s = hslcolval[1]+changevalue[1];
      l = hslcolval[2]+changevalue[2];
      
      if(h > 360) {
        t = h - 360;
        h = 0 + t;
      }
      if(h < 0) {
        h = 360 + h;
      }
      s = Math.abs(s);
      l = Math.abs(l);
      
      // if(s < 0) {
      //   s = 100;
      // }
      // if(s > 100) {
      //   s = 100;
      // }
      // if(l < 0) {
      //   l = 0;
      // }
      // if(l > 100) {
      //   l = 100;
      //}
      
      
            s /= 100;
  l /= 100;

   c = (1 - Math.abs(2 * l - 1)) * s,
      x = c * (1 - Math.abs((h / 60) % 2 - 1)),
      m = l - c/2,
      r = 0,
      g = 0,
      b = 0;
       if (0 <= h && h < 60) {
    r = c; g = x; b = 0;  
  } else if (60 <= h && h < 120) {
    r = x; g = c; b = 0;
  } else if (120 <= h && h < 180) {
    r = 0; g = c; b = x;
  } else if (180 <= h && h < 240) {
    r = 0; g = x; b = c;
  } else if (240 <= h && h < 300) {
    r = x; g = 0; b = c;
  } else if (300 <= h && h < 360) {
    r = c; g = 0; b = x;
  }
  r = Math.round((r + m) * 255);
  g = Math.round((g + m) * 255);
  b = Math.round((b + m) * 255);
this.red = r;
      this.green = g;
      this.blue = b;
    }
  },
watch: {
    mainhsl: function (val) {
      //Shades example:   hsl(197, 96%, 17%)  hsl(197, 96%, 33%)  hsl(197, 96%, 20%)  hsl(197, 97%, 12%)
      if(this.num == this.colornum+1) {
        if(this.$store.getters.mode == "shades") {
          this.hsltorgb(this.mainhsl,[0,2,8]);
        }
        if(this.$store.getters.mode == "analogous") {
          this.hsltorgb(this.mainhsl,[17,0,3]);
        }
        if(this.$store.getters.mode == "monochromatic") {
          this.hsltorgb(this.mainhsl,[0,0,-25]);
        }
        if(this.$store.getters.mode == "triad") {
          this.hsltorgb(this.mainhsl,[0,-18,-11]);
        }
        if(this.$store.getters.mode == "complementary") {
          this.hsltorgb(this.mainhsl,[0,0,-15]);
        }
        if(this.$store.getters.mode == "split_complementary") {
          this.hsltorgb(this.mainhsl,[99,-18,-11]);
        }
        if(this.$store.getters.mode == "double_split_complementary") {
          this.hsltorgb(this.mainhsl,[17,0,3]);
        }
        if(this.$store.getters.mode == "square") {
          this.hsltorgb(this.mainhsl,[0,0,5]);
        }
        if(this.$store.getters.mode == "compound") {
          this.hsltorgb(this.mainhsl,[18,-18,-6]);
        }
        
      }
            if(this.num == this.colornum+2) {
        if(this.$store.getters.mode == "shades") {
          this.hsltorgb(this.mainhsl,[0,2,8]);
        }
        if(this.$store.getters.mode == "analogous") {
          this.hsltorgb(this.mainhsl,[9,-10,-2]);
        }
        if(this.$store.getters.mode == "monochromatic") {
          this.hsltorgb(this.mainhsl,[0,0,-15]);
        }
        if(this.$store.getters.mode == "triad") {
          this.hsltorgb(this.mainhsl,[59,0,5]);
        }
        if(this.$store.getters.mode == "complementary") {
          this.hsltorgb(this.mainhsl,[0,0,5]);
        }
        if(this.$store.getters.mode == "split_complementary") {
          this.hsltorgb(this.mainhsl,[99,0,3]);
        }
        if(this.$store.getters.mode == "double_split_complementary") {
          this.hsltorgb(this.mainhsl,[99,0,5]);
        }
        if(this.$store.getters.mode == "square") {
          this.hsltorgb(this.mainhsl,[47,0,5]);
        }
        if(this.$store.getters.mode == "compound") {
          this.hsltorgb(this.mainhsl,[18,-57,-8]);
        }
        
      }
            if(this.num == this.colornum+3) {
        if(this.$store.getters.mode == "shades") {
          this.hsltorgb(this.mainhsl,[0,2,8]);
        }
        if(this.$store.getters.mode == "analogous") {
          this.hsltorgb(this.mainhsl,[330,-10,-2]);
        }
        if(this.$store.getters.mode == "monochromatic") {
          this.hsltorgb(this.mainhsl,[0,-46,-17]);
        }
        if(this.$store.getters.mode == "triad") {
          this.hsltorgb(this.mainhsl,[203,0,5]);
        }
        if(this.$store.getters.mode == "complementary") {
          this.hsltorgb(this.mainhsl,[137,0,-15]);
        }
        if(this.$store.getters.mode == "split_complementary") {
          this.hsltorgb(this.mainhsl,[171,-18,-11]);
        }
        if(this.$store.getters.mode == "double_split_complementary") {
          this.hsltorgb(this.mainhsl,[171,0,5]);
        }
        if(this.$store.getters.mode == "square") {
          this.hsltorgb(this.mainhsl,[137,0,5]);
        }
        if(this.$store.getters.mode == "compound") {
          this.hsltorgb(this.mainhsl,[99,-18,-6]);
        }
        
      }
            if(this.num == this.colornum+4) {
        if(this.$store.getters.mode == "shades") {
          this.hsltorgb(this.mainhsl,[0,2,8]);
        }
        if(this.$store.getters.mode == "analogous") {
          this.hsltorgb(this.mainhsl,[300,0,3]);
        }
        if(this.$store.getters.mode == "monochromatic") {
          this.hsltorgb(this.mainhsl,[0,0,-10]);
        }
        if(this.$store.getters.mode == "triad") {
          this.hsltorgb(this.mainhsl,[210,-10,-13]);
        }
        if(this.$store.getters.mode == "complementary") {
          this.hsltorgb(this.mainhsl,[137,0,0]);
        }
        if(this.$store.getters.mode == "split_complementary") {
          this.hsltorgb(this.mainhsl,[171,0,3]);
        }
        if(this.$store.getters.mode == "double_split_complementary") {
          this.hsltorgb(this.mainhsl,[300,0,3]);
        }
        if(this.$store.getters.mode == "square") {
          this.hsltorgb(this.mainhsl,[235,0,3]);
        }
        if(this.$store.getters.mode == "compound") {
          this.hsltorgb(this.mainhsl,[99,-18,-6]);
        }
        
      }
          
    }
},
  computed: {
    colornum() {
      return this.$store.getters.colornum;
    },
    hexcolor: function () {
      r = parseInt(this.red).toString(16);
      g = parseInt(this.green).toString(16);
      b = parseInt(this.blue).toString(16);

      if (r.length == 1) r = "0" + r;
      if (g.length == 1) g = "0" + g;
      if (b.length == 1) b = "0" + b;

      return "#" + r + g + b;
    },
    hslcolor: function () {
      var r = this.red;
      var g = this.green;
      var b = this.blue;
      var r1 = r / 255;
    var g1 = g / 255;
    var b1 = b / 255;
 
    var maxColor = Math.max(r1,g1,b1);
    var minColor = Math.min(r1,g1,b1);
    //Calculate L:
    var L = (maxColor + minColor) / 2 ;
    var S = 0;
    var H = 0;
    if(maxColor != minColor){
        //Calculate S:
        if(L < 0.5){
            S = (maxColor - minColor) / (maxColor + minColor);
        }else{
            S = (maxColor - minColor) / (2.0 - maxColor - minColor);
        }
        //Calculate H:
        if(r1 == maxColor){
            H = (g1-b1) / (maxColor - minColor);
        }else if(g1 == maxColor){
            H = 2.0 + (b1 - r1) / (maxColor - minColor);
        }else{
            H = 4.0 + (r1 - g1) / (maxColor - minColor);
        }
    }
 
    L = L * 100;
    S = S * 100;
    H = H * 60;
    if(H<0){
        H += 360;
    }
    var result = [H, S, L];
    return result;
    },
    mainhsl() {
      return this.$store.getters.mainhsl;
    },
  }
});
var app = new Vue({
  el: "#app",
  data: {

  },
  store,
  methods: {},
  computed: {
    colornum() {
      return this.$store.getters.colornum;
    },
    mainhsl() {
      return this.$store.getters.mainhsl;
    },
    mode: {
      get() {
        return this.$store.getters.mode;
      },
      set(value) {
        this.$store.commit("setMode", value);
      }
    }
  },
});