import Vue from 'vue';
import { isObj } from "../../../es5/utils";
import { cloneDeep } from 'lodash';

var range = function range(num, min, max) {
  return Math.min(Math.max(num, min), max);
}; // height of th option item


var ITEM_HEIGHT = 34; // default transition

var DEFAULT_TRANSITION = 'all 150ms ease';
export default Vue.extend().extend({
  name: 'w-picker-column',
  props: {
    options: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    value: {},
    valueKey: String,
    visibleItemCount: {
      type: Number,
      default: 7,
      validator: function validator(val) {
        return [3, 5, 7].includes(val);
      }
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  data: function data() {
    return {
      startY: 0,
      startOffset: 0,
      offset: 0,
      prevY: 0,
      prevTime: null,
      velocity: 0,
      transition: '',
      currentIndex: this.defaultIndex
    };
  },
  computed: {
    currentOptions: function currentOptions() {
      return cloneDeep(this.options);
    },
    wrapperStyle: function wrapperStyle() {
      return {
        transition: this.transition,
        transform: "translate3d(0, ".concat(this.offset, "px, 0)")
      };
    },
    pickerIndicatorStyle: function pickerIndicatorStyle() {
      return {
        top: Math.floor(this.visibleItemCount / 2) * ITEM_HEIGHT + 'px'
      };
    },
    pickerMaskStyle: function pickerMaskStyle() {
      return {
        backgroundSize: '100% ' + Math.floor(this.visibleItemCount / 2) * ITEM_HEIGHT + 'px'
      };
    },
    count: function count() {
      return this.currentOptions.length;
    }
  },
  watch: {
    defaultIndex: function defaultIndex(value) {
      this.setIndex(value);
    }
  },
  created: function created() {
    this.$parent.children && this.$parent.children.push(this);
    this.setIndex(this.currentIndex);
  },
  destroyed: function destroyed() {
    var children = this.$parent.children;
    children && children.splice(children.indexOf(this), 1);
  },
  methods: {
    getOptionText: function getOptionText(option) {
      return isObj(option) && this.valueKey in option ? option[this.valueKey] : option;
    },
    isDisabled: function isDisabled(option) {
      return isObj(option) && option.disabled;
    },
    indexToOffset: function indexToOffset(index) {
      var baseOffset = Math.floor(this.visibleItemCount / 2);
      return (index - baseOffset) * -ITEM_HEIGHT;
    },
    offsetToIndex: function offsetToIndex(offset) {
      offset = Math.round(offset / ITEM_HEIGHT) * ITEM_HEIGHT;
      return -(offset - Math.floor(this.visibleItemCount / 2) * ITEM_HEIGHT) / ITEM_HEIGHT;
    },
    touchStart: function touchStart(event) {
      this.startOffset = this.offset;
      this.startY = event.touches[0].clientY;
      this.prevY = event.touches[0].clientY;
      this.prevTime = new Date();
      this.transition = '';
    },
    touchMove: function touchMove(event) {
      event.preventDefault();
      var currentTime = +new Date();
      var currentY = event.touches[0].clientY;
      var distance = currentY - this.startY;
      this.offset = this.startOffset + distance; // compute velocity

      this.velocity = (event.touches[0].clientY - this.prevY) / (currentTime - this.prevTime);
      this.prevY = currentY;
      this.prevTime = currentTime;
    },
    onTouchend: function onTouchend() {
      this.transition = DEFAULT_TRANSITION;
      var endOffset = this.offset + this.velocity * 150;
      var index = this.offsetToIndex(endOffset);
      this.setIndex(index, true);
    },
    // adjust index, avoid disabled options
    adjustIndex: function adjustIndex(index) {
      index = range(index, 0, this.count);

      for (var i = index; i < this.count; i++) {
        if (!this.isDisabled(this.currentOptions[i])) return i;
      }

      for (var _i = index - 1; _i >= 0; _i--) {
        if (!this.isDisabled(this.currentOptions[_i])) return _i;
      }

      return index;
    },
    setIndex: function setIndex(index) {
      var userAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
      index = this.adjustIndex(index) || 0;
      this.offset = this.indexToOffset(index);

      if (index !== this.currentIndex) {
        this.currentIndex = index;
        userAction && this.$emit('change', index);
      }
    },
    getValue: function getValue() {
      return this.currentOptions[this.currentIndex];
    },
    setValue: function setValue(value) {
      var _this = this;

      var options = this.options;
      var valueIndex = options.findIndex(function (option) {
        if (isObj(value)) {
          return _this.getOptionText(option) === value[_this.valueKey];
        } else {
          return _this.getOptionText(option) === value;
        }
      });
      this.setIndex(valueIndex > -1 ? valueIndex : 0);
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    return h("div", {
      "class": "weui-picker__group",
      "on": {
        "touchstart": this.touchStart,
        "touchmove": this.touchMove,
        "touchend": this.onTouchend,
        "touchcancel": this.onTouchend
      }
    }, [h("div", {
      "class": "weui-picker__mask",
      "style": this.pickerMaskStyle
    }), h("div", {
      "class": "weui-picker__indicator",
      "ref": "indicator",
      "style": this.pickerIndicatorStyle
    }), h("div", {
      "class": "weui-picker__content",
      "style": this.wrapperStyle
    }, [this.options.map(function (option, index) {
      return h("div", {
        "key": index,
        "class": {
          'weui-picker__item': true,
          'weui-picker__item_disabled': _this2.isDisabled(option)
        },
        "domProps": {
          "innerHTML": _this2.getOptionText(option)
        },
        "on": {
          "click": function click() {
            _this2.setIndex(index, true);
          }
        }
      });
    })])]);
  }
});
//# sourceMappingURL=WPickerColumn.js.map