<script setup lang="ts">

import {ref} from "vue";
import IconSearch from "#adata-ui/icons/search.vue";
import {PAGES} from '#adata-ui/shared/constans/pages'
import IconScales from "#adata-ui/icons/scales/scale.vue";
import IconLink from "#adata-ui/icons/link-chain.vue";
import IconUsers from "#adata-ui/icons/users.vue";
import IconGlobe from "#adata-ui/icons/globe.vue";
import IconBlock from "#adata-ui/icons/block.vue";
import IconDollar from "#adata-ui/icons/currency/currency-dollar.vue";
import IconDocument from "#adata-ui/icons/hdocument.vue";
import IconArrowCircle from "#adata-ui/icons/arrow/arrow-circle-down.vue";
import IconWork from "#adata-ui/icons/work-bag.vue";
import IconFile from "#adata-ui/icons/file/file.vue";
import IconCheck from "#adata-ui/icons/hcheck.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 IconCompany from "#adata-ui/icons/company.vue";
import IconMedal from "#adata-ui/icons/medal.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 IconCalc from '#adata-ui/icons/calculator.vue'
import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
import { AIconFiles } from '#components'
type Emits = {
  (e: 'pushMain'): void
}
const isOpen = ref(false)
const tab = ref(useCurrentModule().value)
const { myLayer }: any = useAppConfig()
const { t } = useI18n()
const emits = defineEmits<Emits>()


const tabOptions = [
  {
    name: 'header.products.counterparties.label',
    key: 'pk',
  },
  {
    name: 'header.products.jobs.label',
    key: 'work',
  },
  {
    name: 'header.products.tenders.label',
    key: 'tenders',
  },
  {
    name: 'header.products.fines.label',
    key: 'fines',
  },
  {
    name: 'header.products.analytics.label',
    key: 'analytics',
  },
  {
    name: 'header.products.fea.label',
    key: 'fea',
  },
  {
    name: 'header.products.compliance.label',
    key: 'compliance',
  },
  {
    name: 'header.products.edo.label',
    key: 'edo',
  }
]
const sideLinks = <any>{
  pk: [
    {
      icon: IconSearch,
      label: 'header.products.counterparties.items.counterparty.title',
      link: myLayer.pkUrl + PAGES.pk.main
    },
    {
      icon: IconScales,
      label: 'header.products.counterparties.items.compare.title',
      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.compare : myLayer.pkUrl + PAGES.pk.compare
    },
    {
      icon: IconLink,
      label: 'header.products.counterparties.items.networks.title',
      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + '/search-connections/check' : myLayer.pkUrl + PAGES.pk.connections
    },
    {
      icon: IconUsers,
      label: 'header.products.counterparties.items.wholesale.title',
      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.employees : myLayer.pkUrl + PAGES.pk.employees
    },
    {
      icon: IconGlobe,
      label: 'header.products.counterparties.items.foreign.title',
      link: myLayer.pkUrl + PAGES.pk.foreign
    },
    {
      icon: IconBlock,
      label: 'header.products.counterparties.items.sanction.title',
      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.sanctions : myLayer.pkUrl + PAGES.pk.sanctions
    },
    {
      icon: IconDollar,
      label: 'header.products.counterparties.items.offshore.title',
      link: myLayer.counterParty ?  myLayer.pkUrl + myLayer.counterParty + PAGES.pk.offshore : myLayer.pkUrl + PAGES.pk.offshore
    },
    // {
    //   icon: IconDocument,
    //   label: "Экспресс проверка",
    //   link: "#"
    // },
    {
      icon: IconArrowCircle,
      label: 'header.products.counterparties.items.unloading.title',
      link: myLayer.pkUrl + PAGES.pk.unload
    }
  ],
  work: [
    {
      icon: IconWork,
      label: 'header.products.jobs.items.vacancies.title',
      link: myLayer.workUrl + PAGES.work.vacancy
    },
    {
      icon: IconDocument,
      label: 'header.products.jobs.items.resume.title',
      link: myLayer.workUrl + PAGES.work.summary
    },
  ],
  tenders: [
    {
      icon: IconSearch,
      label: 'header.products.tenders.items.tenders.title',
      link: myLayer.tenderUrl + PAGES.tender.main
    },
    {
      icon: IconFile,
      label: 'header.products.tenders.items.contracts.title',
      link: myLayer.tenderUrl + PAGES.tender.contracts
    },
    {
      icon: IconCheck,
      label: 'header.products.tenders.items.procurement.title',
      link: myLayer.tenderUrl + PAGES.tender.plans
    }
  ],
  fines: [
    {
      icon: IconCheckCircle,
      label: 'header.products.fines.items.fines.title',
      link: myLayer.avtoUrl + PAGES.fines.main
    },
    {
      icon: IconCar,
      label: 'header.products.fines.items.auto.title',
      link: myLayer.avtoUrl + PAGES.fines.avto
    },
    {
      icon: IconTruck,
      label: 'header.products.fines.items.wholesaleAuto.title',
      link: myLayer.avtoUrl + PAGES.fines.bulk
    }
  ],
  analytics: [
    // {
    //   icon: IconSearch,
    //   label: 'header.products.analytics.items.clients.title',
    //   link: myLayer.analyticsUrl + PAGES.analytics.clients
    // },
    {
      icon: IconCheck,
      label: 'header.products.analytics.items.procurement.title',
      link: myLayer.analyticsNewUrl + PAGES.analytics.main
    },
    {
      icon: IconArrowGraph,
      label: 'header.products.analytics.items.activity.title',
      link: myLayer.analyticsNewUrl + PAGES.analytics.index
    },
    {
      icon: IconCompany,
      label: 'header.products.analytics.items.subjects.title',
      link: myLayer.analyticsNewUrl + PAGES.analytics.business
    },
    {
      icon: IconMedal,
      label: 'header.products.analytics.items.rate.title',
      link: myLayer.analyticsNewUrl + PAGES.analytics.rating
    }
  ],
  fea: [
    {
      label: 'header.products.fea.items.i.t',
      icon: IconSearch,
      link: `${myLayer.tnvedUrl}${PAGES.fea.t}`
    },
    {
      label: 'header.products.fea.items.o.t',
      icon: Connections,
      link: `${myLayer.tnvedUrl}${PAGES.fea.o}`
    },
    {
      label: 'header.products.fea.items.cp.t',
      icon: IconFile,
      link: `${myLayer.tnvedUrl}${PAGES.fea.cp}`
    },
    {
      label: 'header.products.fea.items.ca.t',
      icon: IconCalc,
      link: `${myLayer.tnvedUrl}${PAGES.fea.ca}`
    },
    {
      label: 'header.products.fea.items.tr.t',
      icon: IconGlobe,
      link: `${myLayer.tnvedUrl}${PAGES.fea.tr}`
    }
  ],
  compliance: [
    {
      label: 'header.products.compliance.label',
      icon: IconProfile,
      link: myLayer.complianceUrl + PAGES.compliance.l
    }
  ],
  edo: [
    {
      label: 'header.products.edo.label',
      icon: AIconFiles,
      link: 'https://edo.adata.kz' + PAGES.edo.l
    }
  ]
}
const currentLinks = ref(sideLinks[tab.value])

watch(tab, (e) => {
  if (e) {
    currentLinks.value = sideLinks[e]
  }
})

</script>

<template>
  <a-modal v-model="isOpen" :title="t('modals.mobile_navigation.type_main')">
    <div class="flex flex-col gap-5">
      <div class="h-[1px] w-full bg-deepblue-900/5"/>
     <div>
       <a-pill-tabs v-model="tab" :options="tabOptions" view="gray"/>
     </div>
      <div class="h-[40vh] sm:h-[300px] overflow-auto no-scrollbar">
        <nuxt-link
            v-for="item in currentLinks"
            :key="item.label"
            :to="item.link"
            class="flex items-center gap-4 px-4 py-3 bg-gray-50 dark:bg-gray-800 mb-2 rounded"
        >
          <div class="bg-gradient-blue p-1 rounded-lg">
            <component
              :is="item.icon"
              class="w-5 h-5 text-white dark:text-gray-900"
            />
          </div>
          <span>{{ t(item.label) }}</span>
        </nuxt-link>
      </div>
      <div class="h-[1px] w-full bg-deepblue-900/5"/>
    </div>
    <template #footer>
      <nuxt-link to="/" @click="emits('pushMain')" class="flex items-center gap-4 px-4 py-3 bg-gray-50 rounded-md dark:bg-gray-800">
        <a-icon-menu/>
        {{ t('modals.mobile_navigation.return_button') }}
      </nuxt-link>
    </template>
  </a-modal>
</template>

<style scoped>

</style>
