<template>
  <transition
    :enter-active-class="enterAnimateClass"
    :leave-active-class="leaveAnimateClass"
  >
    <slot></slot>
  </transition>
</template>

<script>
import { preset as animates } from "@/config/theme/default/animate.config";

export default {
  name: "PageTransition",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    animate: {
      type: String,
      validator(value) {
        return animates.findIndex((item) => item.name === value) !== -1;
      },
      default: "bounce",
    },
    direction: {
      type: String,
      validator(value) {
        return [
          "x",
          "y",
          "left",
          "right",
          "up",
          "down",
          "downLeft",
          "upRight",
          "downRight",
          "upLeft",
          "downBig",
          "upBig",
          "downLeft",
          "downRight",
          "topRight",
          "bottomLeft",
          "topLeft",
          "bottomRight",
          "default",
        ].includes(value);
      },
      default: "",
    },
    reverse: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    enterAnimateClass() {
      if (!this.disabled) {
        return `animate__animated animate__${this.activeClass(
          false
        )} page-toggle-enter-active`;
      }
      return "";
    },
    leaveAnimateClass() {
      if (!this.disabled) {
        return `animate__animated animate__${this.activeClass(
          true
        )} page-toggle-enter-active`;
      }
      return "";
    },
  },
  methods: {
    activeClass(isLeave) {
      const animate = animates.find((item) => this.animate === item.name);
      if (animate === undefined) {
        return "";
      }
      let direction = "";
      if (this.direction === undefined) {
        [direction] = animate.directions;
      } else {
        direction = animate.directions.find((item) => item === this.direction);
      }
      direction =
        direction === undefined || direction === "default" ? "" : direction;
      if (direction !== "") {
        direction =
          isLeave && this.reverse
            ? this.reversePosition(direction, animate.directions)
            : direction;
        direction = direction[0].toUpperCase() + direction.substring(1);
      }
      const t = isLeave ? "Out" : "In";
      return animate.name + t + direction;
    },
    reversePosition(direction, directions) {
      if (direction.length === 0 || direction === "x" || direction === "y") {
        return direction;
      }
      let index = directions.indexOf(direction);
      index = index % 2 === 1 ? index - 1 : index + 1;
      return directions[index];
    },
  },
};
</script>

<style lang="less">
.page-toggle-enter-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}
.page-toggle-leave-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}
</style>
