/**
 * tdesign v0.32.0
 * (c) 2021 tdesign
 * @license MIT
 */

import Vue from 'vue';
import { prefix } from '../config.js';

var name = "".concat(prefix, "-slider-button");
var TSliderButton = Vue.extend({
  name: name,
  props: {
    value: {
      type: [Number, String],
      "default": 0
    },
    vertical: {
      type: Boolean,
      "default": false
    },
    popupClass: {
      type: String,
      "default": ""
    },
    tooltipProps: {
      type: [Boolean, Object],
      "default": true
    }
  },
  inject: {
    slider: {
      "default": void 0
    }
  },
  computed: {
    placement: function placement() {
      if (this.tooltipProps instanceof Object) {
        var placement = this.tooltipProps.placement;
        if (placement) return placement;
      }

      return this.vertical ? "right" : "top";
    },
    rangeDiff: function rangeDiff() {
      return this.max - this.min;
    },
    formatValue: function formatValue() {
      return this.value;
    },
    disabled: function disabled() {
      return this.slider.disabled;
    },
    max: function max() {
      return this.slider.max;
    },
    min: function min() {
      return this.slider.min;
    },
    step: function step() {
      return this.slider.step;
    },
    precision: function precision() {
      return this.slider.precision;
    },
    currentPos: function currentPos() {
      return "".concat((this.value - this.min) / this.rangeDiff * 100, "%");
    },
    wrapperStyle: function wrapperStyle() {
      return this.vertical ? {
        bottom: this.currentPos
      } : {
        left: this.currentPos
      };
    }
  },
  data: function data() {
    return {
      visible: false,
      hovering: false,
      dragging: false,
      isClick: false,
      clientX: 0,
      clientY: 0,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      startPos: 0,
      newPos: null,
      prevValue: this.value,
      showTooltip: true,
      trigger: "hover",
      showArrow: true,
      overlayStyle: void 0,
      overlayClassName: void 0,
      attach: "body",
      destroyOnClose: null
    };
  },
  mounted: function mounted() {
    this.showTooltip = !this.tooltipProps === false;
    this.setTooltipProps();
  },
  methods: {
    setTooltipProps: function setTooltipProps() {
      if (this.tooltipProps instanceof Object) {
        var _this$tooltipProps = this.tooltipProps,
            trigger = _this$tooltipProps.trigger,
            destroyOnClose = _this$tooltipProps.destroyOnClose,
            showArrow = _this$tooltipProps.showArrow,
            overlayStyle = _this$tooltipProps.overlayStyle,
            overlayClassName = _this$tooltipProps.overlayClassName,
            attach = _this$tooltipProps.attach;

        if (!this.empty(trigger)) {
          this.trigger = trigger;
        }

        this.destroyOnClose = destroyOnClose;

        if (!this.empty(showArrow)) {
          this.showArrow = showArrow;
        }

        this.overlayStyle = overlayStyle;
        this.overlayClassName = overlayClassName;

        if (!this.empty(attach)) {
          this.attach = attach;
        }
      }
    },
    showPopup: function showPopup() {
      this.visible = true;
    },
    hidePopup: function hidePopup() {
      this.visible = false;
    },
    handleMouseEnter: function handleMouseEnter() {
      this.hovering = true;
      this.showPopup();
      this.$refs.button.focus();
    },
    handleMouseLeave: function handleMouseLeave() {
      this.hovering = false;
      this.hidePopup();
    },
    onButtonDown: function onButtonDown(event) {
      if (this.disabled) {
        return;
      }

      event.preventDefault();
      this.onDragStart(event);
      window.addEventListener("mousemove", this.onDragging);
      window.addEventListener("mouseup", this.onDragEnd);
      window.addEventListener("touchmove", this.onDragging);
      window.addEventListener("touchend", this.onDragEnd);
      window.addEventListener("contextmenu", this.onDragEnd);
    },
    onNativeKeyDown: function onNativeKeyDown(e) {
      var code = e.code;
      e.preventDefault();

      if (code === "ArrowDown" || code === "ArrowLeft") {
        this.onKeyDown("sub");
      }

      if (code === "ArrowUp" || code === "ArrowRight") {
        this.onKeyDown("add");
      }
    },
    onLeftKeyDown: function onLeftKeyDown() {
      this.onKeyDown("sub");
    },
    onRightKeyDown: function onRightKeyDown() {
      this.onKeyDown("add");
    },
    onKeyDown: function onKeyDown(state) {
      if (this.disabled) {
        return;
      }

      var stepLength = this.step / this.rangeDiff * 100;

      if (state === "sub") {
        stepLength = -stepLength;
      }

      this.newPos = parseFloat(this.currentPos) + stepLength;
      this.setPosition(this.newPos);
    },
    onDragStart: function onDragStart(event) {
      this.dragging = true;
      this.isClick = true;
      var type = event.type;
      var clientY = event.clientY,
          clientX = event.clientX;

      if (type === "touchstart") {
        var touch = event.touches;
        var _ref = [touch[0].clientY, touch[0].clientX];
        clientY = _ref[0];
        clientX = _ref[1];
      }

      if (this.vertical) {
        this.startY = clientY;
      } else {
        this.startX = clientX;
      }

      this.startPos = parseFloat(this.currentPos);
      this.newPos = this.startPos;
    },
    onDragging: function onDragging(e) {
      var event = e;

      if (!this.dragging) {
        return;
      }

      this.isClick = false;
      this.showPopup();
      this.slider.resetSize();
      var diff = 0;
      var parentSliderSize = this.slider.sliderSize;

      if (this.vertical) {
        this.currentY = event.clientY;
        diff = this.startY - this.currentY;
      } else {
        this.currentX = event.clientX;
        diff = this.currentX - this.startX;
      }

      if (event.type === "touchmove") {
        var touch = event.touches;
        var _ref2 = [touch[0].clientY, touch[0].clientX],
            clientY = _ref2[0],
            clientX = _ref2[1];
        this.clientY = clientY;
        this.clientX = clientX;
      }

      diff = diff / parentSliderSize * 100;
      this.newPos = this.startPos + diff;
      this.setPosition(this.newPos);
    },
    onDragEnd: function onDragEnd() {
      var _this = this;

      if (this.dragging) {
        setTimeout(function () {
          _this.dragging = false;

          _this.hidePopup();

          if (!_this.isClick) {
            _this.setPosition(_this.newPos);
          }
        }, 0);
        window.removeEventListener("mousemove", this.onDragging);
        window.removeEventListener("touchmove", this.onDragging);
        window.removeEventListener("mouseup", this.onDragEnd);
        window.removeEventListener("touchend", this.onDragEnd);
        window.removeEventListener("contextmenu", this.onDragEnd);
      }
    },
    setPosition: function setPosition(pos) {
      var _this2 = this;

      var newPos = pos;

      if (newPos === null || isNaN(newPos)) {
        return;
      }

      if (newPos > 100) {
        newPos = 100;
      } else if (newPos < 0) {
        newPos = 0;
      }

      var perStepLen = 100 * this.step / this.rangeDiff;
      var steps = Math.round(newPos / perStepLen);
      var value = steps * perStepLen * this.rangeDiff * 0.01;
      value += this.min;
      value = Number(parseFloat("".concat(value)).toFixed(this.precision));
      this.$emit("input", value);
      this.$nextTick(function () {
        _this2.showPopup();

        _this2.$refs.popup && _this2.$refs.popup.updatePopper();
      });

      if (!this.dragging && this.value !== this.prevValue) {
        this.prevValue = this.value;
      }
    },
    empty: function empty(str) {
      return str === void 0 || str === null;
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "ref": "button",
      "class": [{
        hover: this.hovering,
        dragging: this.dragging
      }, "t-slider__button-wrapper"],
      "style": this.wrapperStyle,
      "attrs": {
        "tabindex": "0",
        "show-tooltip": this.showTooltip,
        "disabled": this.disabled
      },
      "on": {
        "mouseenter": this.handleMouseEnter,
        "mouseleave": this.handleMouseLeave,
        "mousedown": this.onButtonDown,
        "touchstart": this.onButtonDown,
        "focus": this.handleMouseEnter,
        "blur": this.handleMouseLeave,
        "keydown": this.onNativeKeyDown
      }
    }, [h("t-popup", {
      "ref": "popup",
      "attrs": {
        "popper-class": this.popupClass,
        "disabled": !this.showTooltip,
        "content": String(this.formatValue),
        "placement": this.placement,
        "trigger": this.trigger,
        "showArrow": this.showArrow,
        "overlayStyle": this.overlayStyle,
        "overlayClassName": this.overlayClassName,
        "attach": this.attach,
        "visible": this.visible
      }
    }, [h("div", {
      "class": ["t-slider__button", {
        hover: this.hovering,
        dragging: this.dragging
      }]
    })])]);
  }
});

export { TSliderButton as default };
//# sourceMappingURL=slider-button.js.map
