<template>
  <transition-group
    v-bind="$attrs"
    :enter-active-class="enterClass"
    :leave-active-class="leaveClass"
    move-class="slide-move"
    v-on="hooks"
  >
    <slot />
  </transition-group>
</template>

<script lang="ts">
import Transition from './baseTransition'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'VcWizardTransition',
  mixins: [Transition],
  props: {
    direction: {
      type: String,
      default: 'right'
    },
    mode: {
      type: String,
      default: 'out-in'
    }
  },
  computed: {
    enterClass (): string {
      return this.direction === 'left' ? 'slideXRightIn' : 'slideXLeftIn'
    },
    leaveClass (): string {
      return this.direction === 'left' ? 'slideXRightOut' : 'slideXLeftOut'
    }
  }
})
</script>

<style lang="scss">
.slideXLeftIn {
  animation-name: slideXLeftIn;
}

.slideXLeftOut {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: slideXLeftOut;
}

.slideXRightIn {
  animation-name: slideXRightIn;
}

.slideXRightOut {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: slideXRightOut;
}

@keyframes slideXRightOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes slideXRightIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
  }
}

@keyframes slideXLeftOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideXLeftIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
  }
}
[dir='rtl'] {
  .slideXLeftIn {
    animation-name: slideXRightIn;
  }
  .slideXRightIn {
    animation-name: slideXLeftIn;
  }
  .slideXLeftOut {
    animation-name: slideXRightOut;
  }
  .slideXRightOut {
    animation-name: slideXLeftOut;
  }
}
</style>
