<script setup lang="ts">
import { PAGES } from '#adata-ui/shared/constans/pages'

interface NavList {
  title: string
  to: string
  icon?: Component
}

const props = defineProps<{
  id: string
  icon?: Component
  title: string
  badge?: boolean
  to: string
  navList: NavList[]
  currentModule: boolean
}>()

function isActive(itemPath: string) {
  if (!props.currentModule) return false

  const currentUrl = window.location.href.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
  const section = PAGES[props.id]

  const currentPath = itemPath.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')

  if (currentUrl === currentPath) return true

  if (currentPath.endsWith('/')) {
    let atLeastOne = false

    for (const key in section) {
      const path = section[key]
      if (key !== 'main') {
        const includes = currentUrl.includes(path) || currentUrl.includes('car-result')
        if (includes) {
          atLeastOne = true
          break
        }
      }
    }

    return !atLeastOne
  }

  if (currentPath.includes('check-car')) {
    if (currentUrl.includes('car-result')) {
      return true
    }
  }

  for (const key in section) {
    const path = section[key]
    if (key !== 'main') {
      const includesBoth = currentUrl.includes(path) && currentUrl.startsWith(currentPath)
      if (includesBoth) {
        return true
      }
    }
  }

  return false
}
</script>

<template>
  <div
    class="flex flex-col gap-2"
    :class="{ 'rounded-md bg-gray-50 p-2 dark:bg-gray-800': currentModule }"
  >
    <div class="flex items-center gap-2 pl-[10px]">
      <p class="text-sm font-semibold">
        {{ title }}
      </p>
      <a-status-badge
        v-if="badge"
        type="primary"
        class="w-fit"
        size="xs"
        view="inverted"
      >
        NEW
      </a-status-badge>
    </div>
    <ul class="flex flex-col gap-2">
      <li
        v-for="item in navList"
        :key="item.title"
        class="flex w-full items-center gap-2 rounded-md px-[10px] py-[6px] hover:bg-deepblue-900/5 dark:hover:bg-gray-200/5"
        :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
      >
        <div class="bg-gradient-blue g-white rounded-lg p-1 dark:bg-gray-900">
          <component
            :is="item.icon"
            class="size-[18px] text-white dark:text-gray-900"
          />
        </div>
        <nuxt-link-locale
          v-if="item.to"
          :to="item.to"
          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
        >
          {{ item.title }}
        </nuxt-link-locale>
        <div
          v-else
          class="inline-block w-full align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
        >
          {{ item.title }}
        </div>
      </li>
    </ul>
  </div>
</template>
