<script lang="ts" setup>
const { locale, t } = useI18n();
const route = useRoute();

// Track dropdown open states
const dropdownStates = ref<Record<string, boolean>>({});

const toggleDropdown = (itemLabel: string, isOpen: boolean) => {
  dropdownStates.value[itemLabel] = isOpen;
};

const navigationItems = [
  {
    to: "/",
    label: "navigationItems.services",
    hasDropdown: true,
    dropdownItems: [
      {
        to: "/services/web-applications",
        label: "navigationItems.webApplications",
      },
      {
        to: "/services/mobile-applications",
        label: "navigationItems.mobileApplications",
      },
      // { to: "/service/digital-marketing", label: "navigationItems.digitalMarketing" },
    ],
  },
  {
    to: "/our-projects",
    label: "navigationItems.ourProjects",
    hasDropdown: false,
  },
  { to: "/about", label: "navigationItems.about", hasDropdown: false },
];

function isDropdownActive(item: (typeof navigationItems)[0]) {
  return item.dropdownItems?.some((dropdownItem) =>
    route.path.startsWith(dropdownItem.to),
  );
}
</script>

<template>
  <nav>
    <ul class="flex items-center gap-10">
      <li v-for="item in navigationItems" :key="item.to">
        <DropdownMenu
          v-if="item.hasDropdown"
          :dir="locale === 'ar' ? 'rtl' : 'ltr'"
          @update:open="(open: boolean) => toggleDropdown(item.label, open)"
        >
          <DropdownMenuTrigger
            class="text-primary group transition-opacity hover:opacity-80"
          >
            <span
              class="flex items-center gap-1 transition-opacity"
              :class="{
                'opacity-100': isDropdownActive(item),
                'opacity-50': !isDropdownActive(item),
              }"
            >
              {{ t(item.label) }}
              <SvgChevronDownIcon
                :is-open="dropdownStates[item.label] || false"
              />
            </span>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="center" class="min-w-[200px]">
            <NuxtLinkLocale
              v-for="dropdownItem in item.dropdownItems"
              :key="dropdownItem.to"
              :to="dropdownItem.to"
              class="group w-full cursor-pointer"
            >
              <DropdownMenuItem
                class="group-[.router-link-active]:bg-accent opacity-50 transition-opacity group-[.router-link-active]:opacity-100 focus:opacity-100 group-[:not(.router-link-active)]:focus:bg-transparent"
                as-child
              >
                <span>
                  {{ t(dropdownItem.label) }}
                </span>
              </DropdownMenuItem>
            </NuxtLinkLocale>
          </DropdownMenuContent>
        </DropdownMenu>
        <!-- Regular link for items without dropdown -->
        <NuxtLinkLocale
          v-else
          :to="item.to"
          class="text-primary group transition-opacity hover:opacity-80"
        >
          <span class="opacity-50 group-[.router-link-active]:opacity-100">
            {{ t(item.label) }}
          </span>
        </NuxtLinkLocale>
      </li>
    </ul>
  </nav>
</template>
