<template>
  <Transition :name="transitionName" :style="{ transitionDuration: duration }" mode="out-in" :appear="appear">
    <slot></slot>
  </Transition>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  right: {
    type: Boolean,
    required: false,
    default: false,
  },
  duration: {
    type: String,
    default: '0.3s',
  },
  vertical: {
    type: Boolean,
    required: false,
    default: false,
  },
  bottom: {
    type: Boolean,
    required: false,
    default: false,
  },
  exitOpposite: {
    type: Boolean,
    required: false,
    default: false,
  },
  appear: Boolean,
});

const transitionName = computed(() => {
  if (props.vertical) {
    if (props.exitOpposite) {
      return props.bottom ? 'slide-vert-in-out-bottom-x' : 'slide-vert-in-out-top-x';
    }
    return props.bottom ? 'slide-vert-in-out-bottom' : 'slide-vert-in-out-top';
  }
  if (props.exitOpposite) {
    return props.right ? 'slide-in-out-right-x' : 'slide-in-out-left-x';
  }
  return props.right ? 'slide-in-out-right' : 'slide-in-out-left';
});
</script>

<style lang="scss">
.slide-vert-in-out-bottom-enter-active,
.slide-vert-in-out-top-enter-active,
.slide-vert-in-out-bottom-leave-active,
.slide-vert-in-out-top-leave-active,
.slide-vert-in-out-bottom-x-enter-active,
.slide-vert-in-out-top-x-enter-active,
.slide-vert-in-out-bottom-x-leave-active,
.slide-vert-in-out-top-x-leave-active,
.slide-in-out-left-enter-active,
.slide-in-out-right-enter-active,
.slide-in-out-left-leave-active,
.slide-in-out-right-leave-active,
.slide-in-out-right-x-enter-active,
.slide-in-out-left-x-enter-active,
.slide-in-out-right-x-leave-active,
.slide-in-out-left-x-leave-active {
  transition: all ease-in-out;
  position: absolute;
}

.slide-in-out-left-x-enter-from,
.slide-in-out-left-enter-from,
.slide-in-out-left-leave-to,
.slide-in-out-right-x-leave-to {
  transform: translateX(200%);
}

.slide-in-out-right-x-enter-from,
.slide-in-out-right-enter-from,
.slide-in-out-right-leave-to,
.slide-in-out-left-x-leave-to {
  transform: translateX(-200%);
  opacity: 0;
}

.slide-vert-in-out-top-x-enter-from,
.slide-vert-in-out-top-enter-from,
.slide-vert-in-out-top-leave-to,
.slide-vert-in-out-bottom-x-leave-to {
  transform: translateY(-200%);
  opacity: 0;
}

.slide-vert-in-out-bottom-x-enter-from,
.slide-vert-in-out-bottom-enter-from,
.slide-vert-in-out-bottom-leave-to,
.slide-vert-in-out-top-x-leave-to {
  transform: translateY(200%);
  opacity: 0;
}
</style>
