"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var _unit = require("../utils/format/unit");

var _touch = _interopRequireDefault(require("../mixins/touch"));

var _default = (0, _create.default)({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      style: _vm.divStyle
    }, [_c('div', {
      class: _vm.b({
        disabled: _vm.disabled,
        vertical: _vm.vertical
      }),
      style: _vm.wrapperStyle,
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.onClick($event);
        }
      }
    }, [_c('div', {
      class: _vm.b('bar'),
      style: _vm.barStyle
    }, [_c('div', {
      ref: "wrapper",
      class: _vm.b('button-wrapper'),
      attrs: {
        "role": "slider",
        "tabindex": _vm.disabled ? -1 : 0,
        "aria-valuemin": _vm.min,
        "aria-valuenow": _vm.value,
        "aria-valuemax": _vm.max,
        "aria-orientation": _vm.vertical ? 'vertical' : 'horizontal'
      },
      on: {
        "touchstart": function touchstart($event) {
          $event.stopPropagation();
          return _vm.onTouchStart($event);
        },
        "touchmove": function touchmove($event) {
          $event.preventDefault();
          $event.stopPropagation();
          return _vm.onTouchMove($event);
        },
        "touchend": function touchend($event) {
          $event.stopPropagation();
          return _vm.onTouchEnd($event);
        },
        "touchcancel": function touchcancel($event) {
          $event.stopPropagation();
          return _vm.onTouchEnd($event);
        }
      }
    }, [_vm._t("button", [_c('div', {
      class: _vm.b('button'),
      style: _vm.buttonStyle
    })])], 2)])])]);
  },
  name: "slider",
  mixins: [_touch.default],
  props: {
    disabled: Boolean,
    vertical: {
      type: Boolean,
      default: false
    },
    barHeight: [Number, String],
    buttonSize: {
      type: [Number, String],
      default: 30
    },
    activeColor: String,
    inactiveColor: String,
    min: {
      type: [Number, String],
      default: 0
    },
    max: {
      type: [Number, String],
      default: 100
    },
    step: {
      type: [Number, String],
      default: 1
    },
    value: {
      type: Number,
      default: 0
    },
    height: {
      type: [Number, String],
      default: ''
    }
  },
  data: function data() {
    return {
      dragStatus: '',
      buttonSizeTemp: ''
    };
  },
  computed: {
    wrapperStyle: function wrapperStyle() {
      var _ref;

      var vertical = this.vertical;
      var crossAxis = vertical ? 'width' : 'height';
      return _ref = {
        background: this.inactiveColor
      }, _ref[crossAxis] = (0, _unit.addUnit)(this.barHeight), _ref;
    },
    barStyle: function barStyle() {
      var _barStyle;

      var vertical = this.vertical;
      var mainAxis = vertical ? 'height' : 'width';
      var barStyle = (_barStyle = {}, _barStyle[mainAxis] = (this.value - this.min) * 100 / this.range + "%", _barStyle.background = this.activeColor, _barStyle);

      if (this.dragStatus) {
        barStyle.transition = 'none';
      }

      return barStyle;
    },
    range: function range() {
      return this.max - this.min;
    },
    buttonStyle: function buttonStyle() {
      if (this.buttonSize) {
        var size = (0, _unit.addUnit)(this.buttonSize);
        return {
          width: size,
          height: size
        };
      }
    },
    divStyle: function divStyle() {
      var buttonSizeTemp = this.buttonSizeTemp,
          height = this.height,
          vertical = this.vertical;
      var padding, display, margin, alignItems;

      if (height) {
        margin = (0, _unit.addUnit)(buttonSizeTemp, 2);

        if (!vertical) {
          display = 'flex';
          alignItems = 'center';
        }
      } else {
        padding = (0, _unit.addUnit)(buttonSizeTemp, 2);
      }

      height = (0, _unit.addUnit)(height);
      return {
        height: height,
        margin: margin,
        padding: padding,
        display: display,
        alignItems: alignItems
      };
    }
  },
  created: function created() {
    // format initial value
    this.updateValue(this.value);
  },
  mounted: function mounted() {
    this.buttonSizeTemp = this.$refs.wrapper.clientHeight;
  },
  methods: {
    onTouchStart: function onTouchStart(event) {
      if (this.disabled) {
        return;
      }

      this.touchStart(event);
      this.startValue = this.format(this.value);
      this.dragStatus = 'start';
    },
    onTouchMove: function onTouchMove(event) {
      if (this.disabled) {
        return;
      }

      if (this.dragStatus === 'start') {
        this.$emit('drag-start');
      }

      this.touchMove(event);
      this.dragStatus = 'draging';
      var rect = this.$el.getBoundingClientRect();
      var delta = this.vertical ? this.deltaY : this.deltaX;
      var total = this.vertical ? rect.height : rect.width;
      var diff = delta / total * this.range;
      this.newValue = this.startValue + diff;
      this.updateValue(this.newValue);
    },
    onTouchEnd: function onTouchEnd() {
      if (this.disabled) {
        return;
      }

      if (this.dragStatus === 'draging') {
        this.updateValue(this.newValue, true);
        this.$emit('drag-end');
      }

      this.dragStatus = '';
    },
    onClick: function onClick(event) {
      if (this.disabled) return;
      var rect = this.$el.getBoundingClientRect();
      var delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
      var total = this.vertical ? rect.height : rect.width;
      var value = +this.min + delta / total * this.range;
      this.startValue = this.value;
      this.updateValue(value, true);
    },
    updateValue: function updateValue(value, end) {
      value = this.format(value);

      if (value !== this.value) {
        this.$emit('input', value);
      }

      if (end && value !== this.startValue) {
        this.$emit('change', value);
      }
    },
    format: function format(value) {
      return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
    }
  }
});

exports.default = _default;