<template>
  <transition :name="currentTransition">
    <div
      v-if="value"
      class="bx-popup"
      :class="currentClass"
      >
      <slot />
    </div>
  </transition>
</template>
<script>
import { create } from '../utils/index'
import Popup from '../mixins/popup/index'

const onlyValues = values => str => values.indexOf(str) !== -1

export default create({
  name: 'popup',
  mixins: [Popup],
  props: {
    position: {
      type: String,
      default: 'middle',
      validator: onlyValues(['top', 'left', 'bottom', 'right', 'middle']),
    },
    transition: String,
  },
  computed: {
    currentTransition() {
      let transitionName = this.transition
      if (!transitionName) {
        transitionName =
          this.position === 'middle'
            ? 'bx-animate-fade'
            : `bx-popup-slide--${this.position}`
      }
      return transitionName
    },
    currentClass() {
      return `bx-popup--${this.position}`
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
@import '../../src/style/animate.css';
</style>
