import create from "../utils/create";
import { isDef } from "../utils";
import { doubleRaf, raf } from "../utils/dom/raf";
import { BindEventMixin } from "../mixins/bind-event";
import Icon from "../icon";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.show,
        expression: "show"
      }],
      class: _vm.b({
        wrapable: _vm.wrapable
      }),
      style: _vm.barStyle,
      attrs: {
        "role": "alert"
      },
      on: {
        "click": function click($event) {
          return _vm.onClick($event);
        }
      }
    }, [_vm._t("left-icon", [_vm.leftIcon ? _c('Icon', {
      class: _vm.b('left-icon'),
      attrs: {
        "name": _vm.leftIcon
      }
    }) : _vm._e()]), _c('div', {
      ref: "wrap",
      class: _vm.b('wrap'),
      attrs: {
        "role": "marquee"
      }
    }, [_c('div', {
      ref: "content",
      class: [_vm.b('content'), {
        'van-ellipsis': _vm.scrollable === false && !_vm.wrapable
      }],
      style: _vm.contentStyle,
      on: {
        "transitionend": _vm.onTransitionEnd
      }
    }, [_vm._t("default", [_vm._v(_vm._s(_vm.text))])], 2)]), _vm._t("right-icon", [_vm.iconName ? _c('Icon', {
      class: _vm.b('right-icon'),
      attrs: {
        "name": _vm.iconName
      },
      on: {
        "click": _vm.onClickIcon
      }
    }) : _vm._e()])], 2);
  },
  components: {
    Icon: Icon
  },
  name: "notice-bar",
  mixins: [BindEventMixin(function (bind) {
    // fix cache issues with forwards and back history in safari
    // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
    bind(window, "pageshow", this.start);
  })],
  props: {
    text: String,
    mode: String,
    color: String,
    leftIcon: String,
    wrapable: Boolean,
    background: String,
    scrollable: {
      type: Boolean,
      default: null
    },
    delay: {
      type: [Number, String],
      default: 1
    },
    speed: {
      type: [Number, String],
      default: 50
    }
  },
  data: function data() {
    return {
      show: true,
      offset: 0,
      duration: 0,
      wrapWidth: 0,
      contentWidth: 0
    };
  },
  watch: {
    scrollable: "start",
    text: {
      handler: "start",
      immediate: true
    }
  },
  activated: function activated() {
    this.start();
  },
  computed: {
    iconName: function iconName() {
      var mode = this.mode;
      var iconName;

      if (mode === "closeable") {
        iconName = "close";
      } else if (mode === "link") {
        iconName = "chevron-right";
      }

      return iconName;
    },
    barStyle: function barStyle() {
      return {
        color: this.color,
        background: this.background
      };
    },
    contentStyle: function contentStyle() {
      return {
        transform: this.offset ? "translateX(" + this.offset + "px)" : "",
        transitionDuration: this.duration + "s"
      };
    }
  },
  methods: {
    onClick: function onClick(event) {
      this.$emit("click", event);
    },
    onClickIcon: function onClickIcon(event) {
      if (this.mode === "closeable") {
        this.show = false;
        this.$emit("close", event);
      }
    },
    onTransitionEnd: function onTransitionEnd() {
      var _this = this;

      this.offset = this.wrapWidth;
      this.duration = 0; // wait for Vue to render offset
      // using nextTick won't work in iOS14

      raf(function () {
        // use double raf to ensure animation can start
        doubleRaf(function () {
          _this.offset = -_this.contentWidth;
          _this.duration = (_this.contentWidth + _this.wrapWidth) / _this.speed;

          _this.$emit("replay");
        });
      });
    },
    reset: function reset() {
      this.offset = 0;
      this.duration = 0;
      this.wrapWidth = 0;
      this.contentWidth = 0;
    },
    start: function start() {
      var _this2 = this;

      var delay = isDef(this.delay) ? this.delay * 1000 : 0;
      this.reset();
      clearTimeout(this.startTimer);
      this.startTimer = setTimeout(function () {
        var _this2$$refs = _this2.$refs,
            wrap = _this2$$refs.wrap,
            content = _this2$$refs.content;

        if (!wrap || !content || _this2.scrollable === false) {
          return;
        }

        var wrapWidth = wrap.getBoundingClientRect().width;
        var contentWidth = content.getBoundingClientRect().width;

        if (_this2.scrollable || contentWidth > wrapWidth) {
          doubleRaf(function () {
            _this2.offset = -contentWidth;
            _this2.duration = contentWidth / _this2.speed;
            _this2.wrapWidth = wrapWidth;
            _this2.contentWidth = contentWidth;
          });
        }
      }, delay);
    }
  }
});