<template>
  <div
    v-show="isPopupShow"
    class="zui-popup"
    :class="popupClassRender"
  >
    <transition name="zui-mask-fade">
      <div
        v-show="hasMask && isPopupBoxShow"
        @click="$_onPopupMaskClick"
        class="zui-popup-mask"
      ></div>
    </transition>
    <zui-transition
      :name="transition"
      @before-enter="$_onPopupTransitionStart"
      @before-leave="$_onPopupTransitionStart"
      @after-enter="$_onPopupTransitionEnd"
      @after-leave="$_onPopupTransitionEnd"
    >
      <div
        v-show="isPopupBoxShow"
        class="zui-popup-box"
        :class="[transition]"
      >
        <slot></slot>
      </div>
    </zui-transition>
  </div>
</template>

<script>
export default {
  name: 'Popup',
  components: {
    'zui-transition': {
      name: 'zui-transition',
      functional: true,
      render: function(h, context) {
        return h('transition', context.data, context.children);
      },
    },
  },
  props: {
    position: {
      type: String,
      default: 'center',
    },
    transition: {
      type: String,
      default: function() {
        switch (this.position) {
          case 'bottom':
            return 'zui-slide-up'
          case 'top':
            return 'zui-slide-down'
          case 'left':
            return 'zui-slide-right'
          case 'right':
            return 'zui-slide-left'
          default:
            return 'zui-fade'
        }
      },
    },
    preventScroll: {
      type: Boolean,
      default: false,
    },
    preventScrollExclude: {
      type: [String, Function],
      default: function() {
        return ''
      },
    },
    // Mixin Props
    value: {
      type: Boolean,
      default: false,
    },
    hasMask: {
      type: Boolean,
      default: true,
    },
    maskClosable: {
      type: Boolean,
      default: true,
    },
  },
  data: function() {
    return {
      // controle popup mask & popup box
      isPopupShow: false,
      // controle popup box
      isPopupBoxShow: false,
      // transtion lock
      isAnimation: false,
      largeRadius: false,
    }
  },
  computed: {
    popupClassRender: function() {
      return [
        this.hasMask ? 'with-mask' : '',
        this.largeRadius ? 'large-radius' : '',
        this.position
      ]
    }
  },
  watch: {
    value: function(val) {
      /* istanbul ignore next */
      if (val) {
        if (this.isAnimation) {
          var self = this;
          setTimeout(function() {
            self.$_showPopupBox()
          }, 50);
        } else {
          this.$_showPopupBox()
        }
      } else {
        this.$_hidePopupBox()
      }
    },
    preventScrollExclude: function(val, oldVal) {
      // remove old listener before add
      /* istanbul ignore next */
      this.$_preventScrollExclude(false, oldVal)
      /* istanbul ignore next */
      this.$_preventScrollExclude(true, val)
    },
  },
  mounted: function() {
    this.value && this.$_showPopupBox()
  },
  methods: {
    // MARK: private methods
    $_showPopupBox: function() {
      this.isPopupShow = true
      this.isAnimation = true
      // popup box enter the animation after popup show
      this.isPopupBoxShow = true
      /* istanbul ignore if */
      if (window.process && window.process.env.NODE_ENV == 'test') {
        this.$_onPopupTransitionStart()
        this.$_onPopupTransitionEnd()
      }
      this.preventScroll && this.$_preventScroll(true)
    },
    $_hidePopupBox: function() {
      this.isAnimation = true
      this.isPopupBoxShow = false
      this.preventScroll && this.$_preventScroll(false)
      this.$emit('input', false)
      /* istanbul ignore if */
      if (window.process && window.process.env.NODE_ENV == 'test') {
        this.$_onPopupTransitionStart()
        this.$_onPopupTransitionEnd()
      }
    },
    $_preventScroll: function(isBind) {
      const handler = isBind ? 'addEventListener' : 'removeEventListener'
      const masker = this.$el.querySelector('.zui-popup-mask')
      const boxer = this.$el.querySelector('.zui-popup-box')
      masker && masker[handler]('touchmove', this.$_preventDefault, false)
      boxer && boxer[handler]('touchmove', this.$_preventDefault, false)
      this.$_preventScrollExclude(isBind)
    },
    $_preventScrollExclude: function(isBind, preventScrollExclude) {
      const handler = isBind ? 'addEventListener' : 'removeEventListener'
      preventScrollExclude = preventScrollExclude || this.preventScrollExclude
      const excluder =
        preventScrollExclude && typeof preventScrollExclude == 'string'
          ? this.$el.querySelector(preventScrollExclude)
          : preventScrollExclude
      excluder && excluder[handler]('touchmove', this.$_stopImmediatePropagation, false)
    },
    $_preventDefault: function(event) {
      event.preventDefault()
    },
    $_stopImmediatePropagation: function(event) {
      /* istanbul ignore next */
      event.stopImmediatePropagation()
    },
    // MARK: event handler
    $_onPopupTransitionStart: function() {
      if (!this.isPopupBoxShow) {
        this.$emit('beforeHide')
        this.$emit('before-hide')
      } else {
        this.$emit('beforeShow')
        this.$emit('before-show')
      }
    },
    $_onPopupTransitionEnd: function() {
      /* istanbul ignore next */
      if (!this.isAnimation) {
        return
      }
      /* istanbul ignore next */
      if (!this.isPopupBoxShow) {
        // popup hide after popup box finish animation
        this.isPopupShow = false
        this.$emit('hide')
      } else {
        this.$emit('show')
      }
      /* istanbul ignore next */
      this.isAnimation = false
    },
    $_onPopupMaskClick: function() {
      if (this.maskClosable) {
        this.$_hidePopupBox()
        this.$emit('maskClick')
      }
    },
  },
}
</script>

<style>
@import "./index.css";
</style>