<template>
  <div>
    <slot />
    <div class="progress-wrap">
      <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useHeroStore } from '@/stores/hero';
import { useSettingStore } from '@/stores/setting';

const heroStore = useHeroStore();
const settingStore = useSettingStore();

useHead(computed(() => {
  const title = settingStore.settings?.title ?? heroStore.hero?.title ?? 'Blog details Sidebar Right || Avigo Multipurpose Theme';
  const meta: Array<Record<string, string>> = [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
  ];
  if (settingStore.settings?.meta_description) {
    meta.push({ name: 'description', content: settingStore.settings.meta_description });
  }

  return {
    title,
    meta
  }
}));

onMounted(() => {
  // page-progress
  const progressPath = document.querySelector(".progress-wrap path") as SVGPathElement | null;
  if (progressPath) {
    const pathLength = progressPath.getTotalLength();
    // use webkitTransition (lowercase) to satisfy TypeScript and cast style where needed
    progressPath.style.transition = (progressPath.style as any).webkitTransition = "none";
    progressPath.style.strokeDasharray = pathLength + " " + pathLength;
    progressPath.style.strokeDashoffset = String(pathLength);
    progressPath.getBoundingClientRect();
    progressPath.style.transition = (progressPath.style as any).webkitTransition = "stroke-dashoffset 10ms linear";
    const updateProgress = () => {
      const scroll = $(window).scrollTop();
      const height = $(document).height() - $(window).height();
      const prog = pathLength - (scroll * pathLength) / height;
      progressPath!.style.strokeDashoffset = String(prog);
    };
    updateProgress();
    $(window).scroll(updateProgress);
    const offset = 50;
    const duration = 550;
    jQuery(window).on("scroll", () => {
      if (jQuery(window).scrollTop() > offset) {
        jQuery(".progress-wrap").addClass("active-progress");
      } else {
        jQuery(".progress-wrap").removeClass("active-progress");
      }
    });
    jQuery(".progress-wrap").on("click", (event: any) => {
      event.preventDefault();
      jQuery("html, body").animate({ scrollTop: 0 }, duration);
      return false;
    });
  }
})

</script>
