<template>
  <slider
    class="mm-color-picker-alpha mm-color-picker-slider"
    :x="offset.x"
    :y="offset.y"
    axis="x"
    @change="changeHandler">
    <div
      :style="{
        background: bgColor,
      }"
      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: {
    bgColor() {
      const { r, g, b } = this.color.get("rgb")
      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
    },
    offset() {
      return {
        x: `${this.color.hsva.a * 100}%`,
        y: 0,
      }
    },
  },
  methods: {
    changeHandler({ ratioX: alpha }) {
      const { h, s, v } = this.color.get("hsv")
      this.color.set(`hsva(${h}, ${s * 100}%, ${v * 100}%, ${alpha / 100})`)
    },
  },
}
</script>
