import create from "../utils/create"; // Mixins

import PopupMixin from "../mixins/popup";
import { TouchMixin } from "../mixins/touch";
import { BindEventMixin } from "../mixins/bind-event"; // Components

import Icon from "../icon";
import Swipe from "../swipe";
import ImagePreviewItem from "./ImagePreviewItem";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('transition', {
      attrs: {
        "name": "vm-fade",
        "@after-leave": _vm.onClosed
      }
    }, [_vm.value ? _c('div', {
      class: [_vm.b(), _vm.className]
    }, [_vm.closeable ? _c('Icon', {
      class: _vm.b('close-icon', _vm.closeIconPosition),
      attrs: {
        "role": "button",
        "name": _vm.closeIcon
      },
      on: {
        "click": _vm.emitClose
      }
    }) : _vm._e(), _c('Swipe', {
      ref: "swipe",
      class: _vm.b('swipe'),
      attrs: {
        "lazyRender": "",
        "loop": _vm.loop,
        "duration": _vm.swipeDuration,
        "initialSwipe": _vm.startPosition,
        "showIndicators": _vm.showIndicators,
        "indicatorColor": "white"
      },
      on: {
        "change": _vm.setActive
      }
    }, _vm._l(_vm.images, function (image, index) {
      return _c('ImagePreviewItem', {
        key: index,
        attrs: {
          "b": _vm.b,
          "src": image,
          "show": _vm.value,
          "active": _vm.active,
          "maxZoom": _vm.maxZoom,
          "minZoom": _vm.minZoom,
          "rootWidth": _vm.rootWidth,
          "rootHeight": _vm.rootHeight
        },
        on: {
          "scale": _vm.emitScale,
          "close": _vm.emitClose
        }
      });
    }), 1), _vm.showIndex ? _c('div', {
      class: _vm.b('index')
    }, [_vm._t("index", [_vm._v("\n        " + _vm._s(_vm.active + 1 + " / " + _vm.images.length) + "\n      ")])], 2) : _vm._e(), _vm.$slots['cover'] ? _c('div', {
      class: _vm.b('cover')
    }, [_vm._t("cover")], 2) : _vm._e()], 1) : _vm._e()]);
  },
  components: {
    Icon: Icon,
    Swipe: Swipe,
    ImagePreviewItem: ImagePreviewItem
  },
  name: "image-preview",
  mixins: [TouchMixin, PopupMixin, BindEventMixin(function (bind) {
    bind(window, "resize", this.resize, true);
    bind(window, "orientationchange", this.resize, true);
  })],
  props: {
    className: null,
    closeable: Boolean,
    asyncClose: Boolean,
    showIndicators: Boolean,
    images: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    loop: {
      type: Boolean,
      default: true
    },
    overlay: {
      type: Boolean,
      default: true
    },
    minZoom: {
      type: [Number, String],
      default: 1 / 3
    },
    maxZoom: {
      type: [Number, String],
      default: 3
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    swipeDuration: {
      type: [Number, String],
      default: 500
    },
    startPosition: {
      type: [Number, String],
      default: 0
    },
    overlayClass: {
      type: String,
      default: "overlay"
    },
    closeIcon: {
      type: String,
      default: "close"
    },
    closeOnPopstate: {
      type: Boolean,
      default: true
    },
    closeIconPosition: {
      type: String,
      default: "top-right"
    }
  },
  data: function data() {
    return {
      active: 0,
      rootWidth: 0,
      rootHeight: 0,
      doubleClickTimer: null
    };
  },
  mounted: function mounted() {
    this.resize();
  },
  watch: {
    startPosition: "setActive",
    value: function value(val) {
      var _this = this;

      if (val) {
        this.setActive(+this.startPosition);
        this.$nextTick(function () {
          _this.resize();

          _this.$refs.swipe.swipeTo(+_this.startPosition, {
            immediate: true
          });
        });
      } else {
        this.$emit("close", {
          index: this.active,
          url: this.images[this.active]
        });
      }
    }
  },
  methods: {
    resize: function resize() {
      if (this.$el && this.$el.getBoundingClientRect) {
        var rect = this.$el.getBoundingClientRect();
        this.rootWidth = rect.width;
        this.rootHeight = rect.height;
      }
    },
    emitClose: function emitClose() {
      if (!this.asyncClose) {
        this.$emit("input", false);
      }
    },
    emitScale: function emitScale(args) {
      this.$emit("scale", args);
    },
    setActive: function setActive(active) {
      if (active !== this.active) {
        this.active = active;
        this.$emit("change", active);
      }
    },
    onClosed: function onClosed() {
      this.$emit("closed");
    }
  }
});