<script setup>
import {} from "vue-router";
import { onMounted, ref } from "vue";
import { useRuntimeConfig, useRoute, useRouter } from "#imports";
import { init, send, clear, missing_api_key } from "../../core";
const props = defineProps({
  development: { type: Boolean, required: false, default: false },
  reportSoftNavigation: { type: Boolean, required: false, default: false },
  toolbar: { type: Boolean, required: false, default: false }
});
const { apiKey } = useRuntimeConfig().public.reshepeWebVitals;
const initialised = ref(false);
const sent = ref(false);
const version = "0.1.0";
const router = useRouter();
const route = useRoute();
router.beforeEach(async (to, from) => {
  if (typeof window === "undefined") {
    return;
  }
  if (!initialised.value) {
    init(!props.development, props.reportSoftNavigation);
    initialised.value = true;
  }
  if (!props.reportSoftNavigation) {
    if (!sent.value) {
      if (apiKey && !props.development) {
        sent.value = true;
        send(
          from.path,
          apiKey,
          version,
          "nuxt"
        );
      }
    }
  } else {
    if (apiKey && !props.development) {
      sent.value = true;
      send(
        from.path,
        apiKey,
        version,
        "nuxt"
      );
    }
    clear();
  }
});
onMounted(() => {
  if (!apiKey) {
    missing_api_key();
  } else {
    if (!initialised.value) {
      init(!props.development, props.reportSoftNavigation);
      initialised.value = true;
    }
    addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        if (apiKey && !props.development) {
          sent.value = true;
          send(
            route.path,
            apiKey,
            version,
            "nuxt"
          );
          clear();
        }
      }
    });
  }
  if (props.toolbar) {
    import("../../toolbar").then(({ init: init2 }) => {
      init2("https://reshepe.dev/images/pwa/icon-128x128.png");
    });
  }
});
</script>

<template>
    <div />
</template>
