<template>
  <div class="onboarding-transition-wrapper" ref="wrapper">
    <div class="wrapper" ref="innerWrapperDiv">
      <transition
        :name="transition"
        @enter="cardOverflowHidden"
        @after-enter="cardOverflowAuto"
      >
        <slot />
      </transition>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";

export default defineComponent({
  props: {
    step: {
      default: 0,
      type: Number,
    },
  },
  setup(props) {
    const transition = ref<string>("slide-next");
    const wrapper = ref<HTMLElement | null>(null);
    const innerWrapperDiv = ref<HTMLElement | null>();

    const setMinHeight = (): void => {
      let minHeight = parseInt(getComputedStyle(wrapper.value).minHeight);
      let height = parseInt(getComputedStyle(wrapper.value).height);
      let initialMinHeight = minHeight > height ? minHeight : height;
      const innerWrapper = innerWrapperDiv.value as HTMLElement;
      innerWrapper.style.transitionDuration = "0s";
      innerWrapper.style.minHeight = `${initialMinHeight}px`;
    };

    const cardOverflowHidden = (): void => {
      const card = document.querySelector(".main-card") as HTMLDivElement;
      card.style.overflow = "hidden";
    };

    const cardOverflowAuto = (): void => {
      const card = document.querySelector(".main-card") as HTMLDivElement;
      card.style.overflow = "";
    };

    watch(
      (): number => props.step,
      (newVal: number, oldVal: number): void => {
        if (newVal > oldVal) {
          transition.value = "slide-next";
        } else {
          transition.value = "slide-back";
        }

        setMinHeight();
      }
    );

    return {
      wrapper,
      innerWrapperDiv,
      transition,
      cardOverflowHidden,
      cardOverflowAuto,
    };
  },
});
</script>

<style lang="scss">
.onboarding-transition-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 1;

  .wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition-property: min-height;
    transition-timing-function: ease;
  }

  @include screen-sm() {
    min-height: 468px;

    // ეს რა ღილაკია?!
    &.external-button {
      min-height: calc(468px - var(--form-item-height));
    }
  }

  @include screen-lg() {
    min-height: 596px;

    &.external-button {
      min-height: calc(596px - var(--form-item-height));
    }
  }
}

.slide-next-enter-active,
.slide-next-leave-active,
.slide-back-enter-active,
.slide-back-leave-active {
  transition: transform 0.25s ease, opacity 0.25s ease;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  min-height: 100%;
}

.slide-next-enter,
.slide-back-leave-to {
  transform: translateX(10%);
  opacity: 0;
}
.slide-next-leave-to,
.slide-back-enter {
  transform: translateX(-10%);
  opacity: 0;
}
</style>
