<template>
  <div class="el-color-hue-slider" :class="{ 'is-vertical': vertical }">
    <div class="el-color-hue-slider__bar" @click="handleClick" ref="bar"></div>
    <div
      class="el-color-hue-slider__thumb"
      :style="{
        left: thumbLeft + 'px',
        top: thumbTop + 'px'
      }"
      ref="thumb"
    ></div>
  </div>
</template>

<script>
import draggable from '../draggable';

export default {
  name: 'el-color-hue-slider',

  props: {
    color: {
      required: true
    },

    vertical: Boolean
  },

  data() {
    return {
      thumbLeft: 0,
      thumbTop: 0
    };
  },

  computed: {
    hueValue() {
      const hue = this.color.get('hue');
      return hue;
    }
  },

  watch: {
    hueValue() {
      this.update();
    }
  },

  methods: {
    handleClick(event) {
      const thumb = this.$refs.thumb;
      const target = event.target;

      if (target !== thumb) {
        this.handleDrag(event);
      }
    },

    handleDrag(event) {
      const rect = this.$el.getBoundingClientRect();
      const { thumb } = this.$refs;
      let hue;

      if (!this.vertical) {
        let left = event.clientX - rect.left;
        left = Math.min(left, rect.width - thumb.offsetWidth / 2);
        left = Math.max(thumb.offsetWidth / 2, left);

        hue = Math.round(((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth)) * 360);
      } else {
        let top = event.clientY - rect.top;
        top = Math.min(top, rect.height - thumb.offsetHeight / 2);
        top = Math.max(thumb.offsetHeight / 2, top);

        hue = Math.round(((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight)) * 360);
      }

      this.color.set('hue', hue);
    },

    getThumbLeft() {
      if (this.vertical) return 0;
      const el = this.$el;
      const hue = this.color.get('hue');

      if (!el) return 0;
      const thumb = this.$refs.thumb;
      return Math.round((hue * (el.offsetWidth - thumb.offsetWidth / 2)) / 360);
    },

    getThumbTop() {
      if (!this.vertical) return 0;
      const el = this.$el;
      const hue = this.color.get('hue');

      if (!el) return 0;
      const thumb = this.$refs.thumb;
      return Math.round((hue * (el.offsetHeight - thumb.offsetHeight / 2)) / 360);
    },

    update() {
      this.thumbLeft = this.getThumbLeft();
      this.thumbTop = this.getThumbTop();
    }
  },

  mounted() {
    const { bar, thumb } = this.$refs;

    const dragConfig = {
      drag: event => {
        this.handleDrag(event);
      },
      end: event => {
        this.handleDrag(event);
      }
    };

    draggable(bar, dragConfig);
    draggable(thumb, dragConfig);
    this.update();
  }
};
</script>
