<template>
  <slider
    class="mm-color-picker-hue mm-color-picker-slider is-vertical"
    :x="offset.x"
    :y="offset.y"
    axis="y"
    @change="changeHandler">
    <div class="mm-color-picker-slider--bar">
    </div>
  </slider>
</template>

<script>
import slider from "./slider"

export default {
  components: {
    slider,
  },
  props: {
    color: {
      type: Object,
      required: true,
    },
  },
  computed: {
    offset() {
      return {
        x: 0,
        y: `${this.color.hsva.h / 3.6}%`,
      }
    },
  },
  methods: {
    changeHandler({ ratioY }) {
      const { s, v, a } = this.color.get("hsv")
      this.color.set(`hsva(${ratioY * 3.6}, ${s * 100}%, ${v * 100}%, ${a})`)
    },
  },
}
</script>
