<script setup lang="ts">
import IconMenu from '#adata-ui/icons/menu-filled.vue'
import IconInvoice from '#adata-ui/icons/invoice.vue'
import ContentNavigationModal from '#adata-ui/components/modals/ContentNavigationModal.vue'
import ContactsMobileModel from '#adata-ui/components/modals/ContactsMobileModel.vue'
import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
import { useCurrentModule } from '#adata-ui/composables/projectState'
import AModal from "#adata-ui/components/overlays/modal/AModal.vue";

interface Props {
  replenish?: string
  hasNotification?: boolean
  email: string | undefined
  rate: string
  daysRemaining: number
  limitRemaining: number
  balance: number
  isAuthenticated: boolean
  showLogIn?: boolean
  module?: ProjectKeys
  oldVersion?: string
}
const props = withDefaults(defineProps<Props>(), {
  limitRemaining: 0,
  daysRemaining: 0,
  balance: 0,
  rate: 'Базовый',
  showLogIn: true,
  module: 'pk'
})
const emit = defineEmits(['logout'])
useCurrentModule().value = props.module
const appConfig = useAppConfig()
const landingUrl = appConfig.myLayer.landingUrl
const activeModule = ref<string | null>(null)
const isMain = ref(false)
const isContacts = ref(false)
const isProfile = ref(false)
const { t } = useI18n()
const items = [
  {
    label: 'modals.mobile_navigation.type_tariff',
    icon: IconInvoice,
    value: 'tariff'
  },
  {
    label: 'modals.mobile_navigation.type_main',
    icon: IconMenu,
    value: 'main'
  }
]
function onLogout() {
  emit('logout')
  isProfile.value = false
}
watch(activeModule, (e) => {
  if (e === 'main') {
    isMain.value = true
  } else if (e === 'contacts') {
    isContacts.value = true
  } else if (e === 'profile') {
    isProfile.value = true
  } else if (e === 'tariff') {
    navigateTo(`${landingUrl}/tariffs`, { external: true })
  }
  activeModule.value = ''
})
</script>

<template>
  <div>
    <content-navigation-modal v-model="isMain" @push-main="isMain = false" />
    <contacts-mobile-model v-model="isContacts" @push-main="isContacts = false" />
    <a-modal v-model="isProfile" @logout="isProfile = false" @push-main="isProfile = false">
      <div class="-mx-4">
        <profile-menu
          :balance="balance"
          :days-remaining="daysRemaining"
          :limit-remaining="limitRemaining"
          :rate="rate"
          :replenish="replenish"
          :old-version="oldVersion"
          @logout="onLogout"
        />
      </div>
    </a-modal>
    <div ref="bottom" class="sticky bottom-0 z-[10000] lg:hidden">
      <a-bottom-navigation
        :is-authenticated="isAuthenticated"
        :email="email"
        :days-remaining="daysRemaining"
        :limit-remaining="limitRemaining"
        :rate="rate"
        :balance="balance"
        @logout="onLogout"
        v-model="activeModule"
        :items="items"
      />
    </div>
  </div>
</template>

<style scoped></style>
