<template>
  <div
    :class="[prefixCls + '-alpha']"
    tabindex="0"
    @click="$el.focus()"
    @keydown.left="handleLeft"
    @keydown.right="handleRight"
    @keydown.up="handleUp"
    @keydown.down="handleDown"
  >
    <div :class="[prefixCls + '-alpha-checkboard-wrap']">
      <div :class="[prefixCls + '-alpha-checkerboard']"></div>
    </div>
    <div :style="gradientStyle" :class="[prefixCls + '-alpha-gradient']"></div>
    <div
      ref="container"
      :class="[prefixCls + '-alpha-container']"
      @mousedown="handleMouseDown"
      @touchmove="handleInput"
      @touchstart="handleChange"
    >
      <div
        :style="{ top: 0, left: `${value.a * 100}%` }"
        :class="[prefixCls + '-alpha-pointer']"
      >
        <div :class="[prefixCls + '-alpha-picker']"></div>
      </div>
    </div>
  </div>
</template>
<script>
import HSAMixin from "./hsaMixin";
import Prefixes from "./prefixMixin";
import { clamp, toRGBAString } from "./utils";

export default {
  name: "Alpha",
  mixins: [HSAMixin, Prefixes],
  emits: ["input", "change"],
  data() {
    const normalStep = 1;
    const jumpStep = 10;

    return {
      left: -normalStep,
      right: normalStep,
      up: jumpStep,
      down: -jumpStep,
      powerKey: "shiftKey",
    };
  },
  computed: {
    gradientStyle() {
      const { r, g, b } = this.value.rgba;
      const start = toRGBAString({ r, g, b, a: 0 });
      const finish = toRGBAString({ r, g, b, a: 1 });

      return {
        background: `linear-gradient(to right, ${start} 0%, ${finish} 100%)`,
      };
    },
  },
  methods: {
    change(newAlpha) {
      const { h, s, l } = this.value.hsl;
      this.$emit("change", { h, s, l, a: newAlpha, source: "rgba" });
    },
    input(newAlpha) {
      const { h, s, l } = this.value.hsl;
      this.$emit("input", { h, s, l, a: newAlpha, source: "rgba" });
    },
    handleSlide(e, direction) {
      e.preventDefault();
      e.stopPropagation();

      this.change(
        clamp(
          e[this.powerKey]
            ? direction
            : Math.round(this.value.hsl.a * 100 + direction) / 100,
          0,
          1
        )
      );
    },
    handleInput(e) {
      e.preventDefault();
      e.stopPropagation();

      const left = this.getLeft(e);

      if (left < 0) {
        this.input(0);
        return;
      }

      const { clientWidth } = this.$refs.container;

      if (left > clientWidth) {
        this.input(1);
        return;
      }

      this.input(Math.round((left * 100) / clientWidth) / 100);
    },
    handleChange(e) {
      e.preventDefault();
      e.stopPropagation();

      const left = this.getLeft(e);

      if (left < 0) {
        this.change(0);
        return;
      }

      const { clientWidth } = this.$refs.container;

      if (left > clientWidth) {
        this.change(1);
        return;
      }

      this.change(Math.round((left * 100) / clientWidth) / 100);
    },
  },
};
</script>
