import create from "../utils/create";
import { preventDefault } from "../utils/dom/event";
import Scroll from "../utils/dom/scroll"; // Mixins

import { TouchMixin } from "../mixins/touch"; // Components

import Loading from "../loading";
var DEFAULT_HEAD_HEIGHT = 50;
var TEXT_STATUS = ["pulling", "loosing", "success"];
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      class: _vm.b()
    }, [_c('div', {
      ref: "track",
      class: _vm.b('track'),
      style: _vm.trackStyle
    }, [_c('div', {
      class: _vm.b('head'),
      style: _vm.headStyle
    }, [_vm.status === 'normal' ? _vm._t("normal", [_c('div', {
      class: _vm.b('text')
    }, [_vm._v(_vm._s(_vm.statusText))])]) : _vm._e(), _vm.status === 'pulling' ? _vm._t("pulling", [_c('div', {
      class: _vm.b('text')
    }, [_vm._v(_vm._s(_vm.statusText))])]) : _vm._e(), _vm.status === 'loosing' ? _vm._t("loosing", [_c('div', {
      class: _vm.b('text')
    }, [_vm._v(_vm._s(_vm.statusText))])]) : _vm._e(), _vm.status === 'loading' ? _vm._t("loading", [_c('Loading', {
      attrs: {
        "size": "16"
      }
    }, [_vm._v(_vm._s(_vm.statusText))])]) : _vm._e(), _vm.status === 'success' ? _vm._t("success", [_c('div', {
      class: _vm.b('text')
    }, [_vm._v(_vm._s(_vm.statusText))])]) : _vm._e()], 2), _vm._t("default")], 2)]);
  },
  components: {
    Loading: Loading
  },
  name: "pull-refresh",
  mixins: [TouchMixin],
  props: {
    disabled: Boolean,
    successText: String,
    pullingText: String,
    loosingText: String,
    loadingText: String,
    value: {
      type: Boolean,
      required: true
    },
    successDuration: {
      type: [Number, String],
      default: 500
    },
    animationDuration: {
      type: [Number, String],
      default: 300
    },
    headHeight: {
      type: [Number, String],
      default: DEFAULT_HEAD_HEIGHT
    }
  },
  data: function data() {
    return {
      status: "normal",
      distance: 0,
      duration: 0
    };
  },
  computed: {
    trackStyle: function trackStyle() {
      return {
        transitionDuration: this.duration + "ms",
        transform: this.distance ? "translate3d(0," + this.distance + "px, 0)" : ""
      };
    },
    statusText: function statusText() {
      var status = this.status,
          successText = this.successText,
          pullingText = this.pullingText,
          loosingText = this.loosingText,
          loadingText = this.loadingText;
      var text = "";

      switch (status) {
        case "loosing":
          text = loosingText || "释放即可刷新...";
          break;

        case "pulling":
          text = pullingText || "下拉即可刷新...";
          break;

        case "loading":
          text = loadingText || "加载中...";
          break;

        case "success":
          text = successText;
          break;
      }

      return text;
    },
    touchable: function touchable() {
      return this.status !== "loading" && this.status !== "success" && !this.disabled;
    },
    headStyle: function headStyle() {
      if (this.headHeight !== DEFAULT_HEAD_HEIGHT) {
        return {
          height: this.headHeight + "px"
        };
      }
    }
  },
  watch: {
    value: function value(loading) {
      this.duration = this.animationDuration;

      if (loading) {
        this.setStatus(+this.headHeight, true);
      } else if (this.$slots["success"] || this.successText) {
        this.showSuccessTip();
      } else {
        this.setStatus(0, false);
      }
    }
  },
  mounted: function mounted() {
    this.bindTouchEvent(this.$refs.track);
    this.scrollEl = Scroll.getScrollEventTarget(this.$el);
  },
  methods: {
    checkPullStart: function checkPullStart(event) {
      this.ceiling = Scroll.getScrollTop(this.scrollEl) === 0;

      if (this.ceiling) {
        this.duration = 0;
        this.touchStart(event);
      }
    },
    onTouchStart: function onTouchStart(event) {
      if (this.touchable) {
        this.checkPullStart(event);
      }
    },
    onTouchMove: function onTouchMove(event) {
      if (!this.touchable) {
        return;
      }

      if (!this.ceiling) {
        this.checkPullStart(event);
      }

      this.touchMove(event);

      if (this.ceiling && this.deltaY >= 0 && this.direction === "vertical") {
        preventDefault(event);
        this.setStatus(this.ease(this.deltaY));
      }
    },
    onTouchEnd: function onTouchEnd() {
      var _this = this;

      if (this.touchable && this.ceiling && this.deltaY) {
        this.duration = this.animationDuration;

        if (this.status === "loosing") {
          this.setStatus(+this.headHeight, true);
          this.$emit("input", true); // ensure value change can be watched

          this.$nextTick(function () {
            _this.$emit("refresh");
          });
        } else {
          this.setStatus(0);
        }
      }
    },
    ease: function ease(distance) {
      var headHeight = +this.headHeight;

      if (distance > headHeight) {
        if (distance < headHeight * 2) {
          distance = headHeight + (distance - headHeight) / 2;
        } else {
          distance = headHeight * 1.5 + (distance - headHeight * 2) / 4;
        }
      }

      return Math.round(distance);
    },
    setStatus: function setStatus(distance, isLoading) {
      var status;

      if (isLoading) {
        status = "loading";
      } else if (distance === 0) {
        status = "normal";
      } else {
        status = distance < this.headHeight ? "pulling" : "loosing";
      }

      this.distance = distance;

      if (status !== this.status) {
        this.status = status;
      }
    },
    showSuccessTip: function showSuccessTip() {
      var _this2 = this;

      this.status = "success";
      setTimeout(function () {
        _this2.setStatus(0);
      }, this.successDuration);
    }
  }
});