<template>
 <Navbar
  :class="classObject"
  :sticky="sticky"
 >
  <slot />
 </Navbar>
</template>

<script setup>
import Navbar from "../../bootstrap/navbar/Navbar";
import { useWindowScroll, watchDebounced } from "../../../composables/utils/helpers";
import { computed, ref } from "#imports";
const props = defineProps({
  offsetTop: {
    type: Number,
    default: 800
  }
});
const windowScroll = useWindowScroll();
const beforeScroll = ref(0);
const sticky = ref("top");
const animateDirection = ref(false);
const classObject = computed(() => ({
  "un-transition-all": true,
  [`un-duration-3000`]: true,
  ["un-ease-in-out"]: true
}));
watchDebounced(
  windowScroll.y,
  () => {
    if (windowScroll.y.value < props.offsetTop) {
      sticky.value = "top";
      return;
    }
    if (windowScroll.y.value > beforeScroll.value) {
      animateDirection.value = false;
      sticky.value = "";
    } else {
      animateDirection.value = true;
      sticky.value = "top";
    }
    beforeScroll.value = windowScroll.y.value;
  },
  { debounce: 100, maxWait: 300 }
);
</script>
