<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { RouterView } from "vue-router";
import Footer from "@/components/Footer.vue";

const showGoTop = ref(false);

const checkScrollPosition = () => {
  showGoTop.value = window.scrollY > 100;
};

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

let isMounted = ref(false);

onMounted(() => {
  setTimeout(() => {
    isMounted.value = true;
  }, 500);

  window.addEventListener("scroll", checkScrollPosition);

  // 聊天機器人 HubSpot
  // Start of HubSpot Embed Code
  // const script = document.createElement("script");
  // script.type = "text/javascript";
  // script.id = "hs-script-loader";
  // script.async = true;
  // script.defer = true;
  // script.src = "//js-na1.hs-scripts.com/43621630.js";
  // document.head.appendChild(script);
  // End of HubSpot Embed Code
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", checkScrollPosition);
});
</script>

<template>
  <RouterView />
  <Transition>
    <v-btn
      v-if="showGoTop"
      @click="scrollToTop"
      color="purple"
      icon="mdi-arrow-up-bold"
      class="top-btn"
    ></v-btn>
  </Transition>
  <Footer v-show="isMounted" />
</template>

<style lang="scss">
.top-btn {
  width: 3.75em !important;
  height: 3.75em !important;
  position: fixed !important;
  right: 1.5em;
  bottom: 1.5em;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0.0625em 0.25em,
    rgba(0, 0, 0, 0.2) 0 0.125em 0.75em !important;
  .v-icon {
    font-size: 2.0625em;
  }
}
</style>
