<script setup lang="ts">
import SubNavItem from "@/components/header/SubNavItem.vue";
import { isExternalLink } from "@/utils/navigation";
import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

export interface EntryRoute {
  name: string;
}

export type EntryOrExternalRoute = EntryRoute | string;

export interface SubNavEntry {
  id: number;
  name: string;
  route: EntryOrExternalRoute;
  dataCy?: string;
}

export interface Props {
  items: SubNavEntry[];
}
const props = defineProps<Props>();

const isCurrentRoute = (route: { name: string } | string) => {
  return typeof route !== "string" && route?.name === router.currentRoute.value.name;
};
const currentRouteName = computed(() => {
  return props.items.find((item) => isCurrentRoute(item.route))?.name || "";
});
const open = ref<boolean>(false);
const currentRoute = ref(props.items.find((item) => isCurrentRoute(item.route)));
const selectRoute = (current: SubNavEntry) => {
  // we use this to mimic VueRouter's active flag
  open.value = false;
  currentRoute.value = current;
};

const internalLinks = computed(() => {
  return props.items.filter((i) => !isExternalLink(i.route));
});
const externalLinks = computed(() => {
  return props.items.filter((i) => isExternalLink(i.route));
});
</script>
<template>
  <nav class="border-b bg-white px-4 lg:px-8">
    <Listbox as="div" :model-value="currentRoute" by="id">
      <div class="relative w-full py-2 lg:hidden">
        <button
          class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left"
          @click="open = !open"
        >
          {{ currentRouteName }}
          <span
            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
          >
            <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
          </span>
        </button>
        <ListboxOptions
          v-if="open"
          class="absolute top-14 z-50 flex w-full cursor-default flex-col rounded-xl border-0 bg-white text-left shadow-lg"
          static
        >
          <ListboxOption
            v-for="item in items"
            :key="item.id"
            v-slot="{ selected }"
            :value="item"
            class="relative w-full border-b py-3 pl-10 pr-10 last:border-b-0"
          >
            <SubNavItem
              :to="item.route"
              class="flex items-center gap-2"
              @click="selectRoute(item)"
            >
              <it-icon-check
                v-if="selected"
                class="absolute left-2 top-1/2 w-8 -translate-y-1/2"
              />
              {{ item.name }}
            </SubNavItem>
          </ListboxOption>
        </ListboxOptions>
      </div>
    </Listbox>
    <div class="center hidden items-end justify-between lg:flex">
      <ul class="flex flex-row gap-10">
        <li
          v-for="item in internalLinks"
          :key="item.id"
          class="border-t-2 border-t-transparent"
          :class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
        >
          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
            {{ item.name }}
          </SubNavItem>
        </li>
      </ul>
      <ul class="flex flex-row gap-10">
        <li
          v-for="item in externalLinks"
          :key="item.id"
          class="border-b-2 border-t-2 border-b-transparent border-t-transparent"
        >
          <SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
            {{ item.name }}
          </SubNavItem>
        </li>
      </ul>
    </div>
  </nav>
</template>
