<script setup>
import { delay, useWindowScroll, defaultWindow } from "../../../composables/utils/helpers";
import { ref, computed, watch } from "#imports";
import IconBox from "../icon-box/IconBox";
const props = defineProps({
  offsetTop: {
    type: Number,
    default: 500
  },
  color: {
    type: String,
    default: "primary"
  }
});
const { y } = useWindowScroll();
const isShown = ref();
const isShow = ref();
const classObject = computed(() => {
  return {
    "animated": true,
    "animated-fade-out-down": !isShown.value,
    "animated-fade-in-up": isShown.value,
    "position-fixed": true,
    "invisible": !isShow.value,
    "visible": true,
    "opacity-75": isShow.value && isShown.value
  };
});
watch(() => y.value > props.offsetTop, async (newState) => {
  isShown.value = newState;
  if (isShown.value) {
    isShow.value = true;
  } else {
    await delay(3e3);
    isShow.value = isShown.value;
  }
});
const onClick = () => {
  defaultWindow?.scrollTo({ top: 0, behavior: "smooth" });
};
</script>

<template>
 <IconBox
  icon="bi:chevron-up"
  :color="props.color"
  circle
  :class="classObject"
  style="bottom:2rem;right:2rem;"
  @click="onClick"
  class="back-to-top"
 />
</template>

<style scoped>
.back-to-top {
  transition: opacity 3s ease-out !important;
}
</style>
