<script setup lang="ts">
import NavCard from '#adata-ui/components/navigation/header/NavCard.vue'
import { PAGES } from '#adata-ui/shared/constans/pages'
import ListItem from '#adata-ui/components/navigation/header/ListItem.vue'
import IconSearch from '#adata-ui/icons/search.vue'
import IconUsers from '#adata-ui/icons/users.vue'
import IconScales from '#adata-ui/icons/scales/scale.vue'
import IconLink from '#adata-ui/icons/link-chain.vue'
import IconArrowCircle from '#adata-ui/icons/arrow/arrow-circle-down.vue'
import IconBlock from '#adata-ui/icons/block.vue'
import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
import IconWork from '#adata-ui/icons/work-bag.vue'
import IconDocument from '#adata-ui/icons/hdocument.vue'
import IconCheck from '#adata-ui/icons/hcheck.vue'
import IconCalc from '#adata-ui/icons/calculator.vue'
import IconGlobe from '#adata-ui/icons/globe.vue'
import IconFile from '#adata-ui/icons/file/file.vue'
import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
import IconCar from '#adata-ui/icons/car.vue'
import IconTruck from '#adata-ui/icons/truck.vue'
import IconArrowGraph from '#adata-ui/icons/arrow/arrow-graph-up.vue'
import IconMedal from '#adata-ui/icons/medal.vue'
import IconHandshake from '#adata-ui/icons/handshake.vue'
import IconClipboardText from '#adata-ui/icons/clipboard-text.vue'
import IconUsersFocus from '#adata-ui/icons/users-focus.vue'
import IconCompany from '#adata-ui/icons/company.vue'
import IconProfile from '#adata-ui/icons/profile.vue'
import Connections from '#adata-ui/icons/sviazi.vue'

import { useCurrentModule } from '#adata-ui/composables/projectState'
import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
import NavList from '#adata-ui/components/navigation/header/NavList.vue'
import CardGallery from '#adata-ui/components/navigation/header/CardGallery.vue'

const props = withDefaults(
  defineProps<{
    animation?: string
    index?: number
    url?: string
  }>(),
  {
    animation: 'next',
    index: 0,
    url: ''
  }
)

defineEmits(['outerClick', 'mouseOver'])
const { myLayer }: any = useAppConfig()
const colorMode = useColorMode()
const activeTab = ref(useCurrentModule().value)
const localePath = useLocalePath()

const { t, locale } = useI18n()

const pageUrl = useRequestURL()

const allImages = computed(() => {
  if (activeTab.value === 'pk' || activeTab.value === 'counterparty') {
    return colorMode.value === 'dark'
      ? `/mode/dark-pk-${locale.value}.webp`
      : `/mode/light-pk-${locale.value}.webp`
  }
  if (activeTab.value === 'work') {
    return colorMode.value === 'dark'
      ? `/mode/dark-work-${locale.value}.webp`
      : `/mode/light-work-${locale.value}.webp`
  }
  if (activeTab.value === 'tenders') {
    return colorMode.value === 'dark'
      ? `/mode/dark-tenders-${locale.value}.webp`
      : `/mode/light-tenders-${locale.value}.webp`
  }
  if (activeTab.value === 'fines') {
    return colorMode.value === 'dark'
      ? `/mode/dark-fines-${locale.value}.webp`
      : `/mode/light-fines-${locale.value}.webp`
  }
  if (activeTab.value === 'analytics') {
    return colorMode.value === 'dark'
      ? `/mode/dark-analytics-${locale.value}.webp`
      : `/mode/light-analytics-${locale.value}.webp`
  }
  if (activeTab.value === 'fea') {
    return colorMode.value === 'dark'
      ? `/mode/dark-fea-${locale.value}.webp`
      : `/mode/light-fea-${locale.value}.webp`
  }
  if (activeTab.value === 'compliance') {
    return colorMode.value === 'dark'
      ? `/mode/dark-complience-${locale.value}.webp`
      : `/mode/light-complience-${locale.value}.webp`
  }
})

const filteredItems = useHeaderNavigationLinks()
const someHovered = ref(false)

function isCurrentModule(currentModule: string) {
  if (currentModule === 'fines') return 'avto'
  if (currentModule === 'analytics') return 'analytics-new'
  if (currentModule === 'compliance') return 'ac'
  if (currentModule === 'fea') return 'tnved'

  return currentModule
}
</script>

<template>
  <div class="capitalize">
    <div class="relative bg-white dark:bg-gray-950">
      <transition :name="animation">
        <div
          :key="index"
          class="a-container py-8"
        >
          <div class="flex justify-between gap-5">
            <div class="flex gap-[10px] divide-x divide-gray-500/50">
              <div class="flex flex-col gap-5 w-[290px]">
                <nav-list
                  v-for="module in filteredItems.slice(0,2)"
                  :id="module.key"
                  :key="module.key"
                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                  :title="module.name"
                  :nav-list="module.items"
                  :to="module.to"
                  :icon="module.icon"
                />
              </div>
              <div class="flex flex-col gap-5 w-[290px] pl-[10px]">
                <nav-list
                  v-for="module in filteredItems.slice(2,5)"
                  :id="module.key"
                  :key="module.key"
                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                  :title="module.name"
                  :nav-list="module.items"
                  :to="module.to"
                  :icon="module.icon"
                />
              </div>
              <div class="flex flex-col gap-5 w-[330px] pl-[10px]">
                <nav-list
                  v-for="module in filteredItems.slice(5,8)"
                  :id="module.key"
                  :key="module.key"
                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                  :title="module.name"
                  :nav-list="module.items"
                  :to="module.to"
                  :icon="module.icon"
                  badge
                />
              </div>
            </div>
            <card-gallery class="hidden xl:block" />
          </div>
        </div>
      </transition>
      <button
        class="absolute right-8 top-4"
        @click="$emit('outerClick')"
      >
        <a-icon-x-mark
          width="32"
          height="32"
        />
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
$percent: 30%;
.next-enter-from,
.next-leave-to {
  opacity: 0;
  transform: translateX($percent);
  position: absolute;
}

.next-enter-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.next-leave-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateX(-$percent);
}

// Backwards transition

.prev-enter-from,
.prev-leave-to {
  position: absolute;

  opacity: 0;
  transform: translateX(-$percent);
}

.prev-enter-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.prev-leave-active {
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateX($percent);
}
</style>
