<template>
  <slider
    class="mm-color-picker-panel"
    :style="{
      backgroundColor: background
    }"
    :x="offset.x"
    :y="offset.y"
    @change="changeHandler">
    <div class="mm-color-picker-panel--white"></div>
    <div class="mm-color-picker-panel--black"></div>
  </slider>
</template>

<script>
import slider from "./slider"

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