<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

function navigateToVisibleChrome() {
  const removeRoutes: string[] = [];

  // Function to pop routes until `meta.hideChrome` is `false`
  const findVisibleChromeRoute = () => {
    const currentRoute = router.currentRoute.value;
    if (currentRoute?.meta?.hideChrome) {
      removeRoutes.push(currentRoute.fullPath || currentRoute.path);
      router.back();
    } else {
      // Cleaning up stored routes when reached the target
      if (removeRoutes.length) removeRoutes.length = 0;
    }
  };

  // Watch the route change
  router.afterEach((_to, from) => {
    if (removeRoutes.includes(from.fullPath || from.path)) {
      findVisibleChromeRoute();
    }
  });

  // Start popping routes
  findVisibleChromeRoute();
}
</script>

<template>
  <div class="flex justify-end">
    <button type="button" class="p-3" @click="navigateToVisibleChrome()">
      <it-icon-close class="size-7 text-black"></it-icon-close>
    </button>
  </div>
</template>
