<script setup lang="ts" generic="T extends NavigationItem">

import Avatar from "#adata-ui/icons/avatar.vue";
import IconLogout from "#adata-ui/icons/logout.vue";

const {t} = useI18n()
const appConfig = useAppConfig()
const loginUrl = appConfig.myLayer.loginUrl

interface Props {
  grow?: boolean
  items: T[]
  modelValue: string | null
  replenish?: string
  hasNotification?: boolean
  email: string | undefined
  rate: string
  daysRemaining: number
  limitRemaining: number
  balance: number
  isAuthenticated: boolean
  showLogIn?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  limitRemaining: 0,
  daysRemaining: 0,
  balance: 0,
  rate: 'Базовый',
  showLogIn: true
})
const emit = defineEmits(['update:modelValue', 'logout'])

const goAuth = () => {
  if (window) {
    let fullPath = encodeURIComponent(window.location.toString())
    if (fullPath.includes('basic-info')) {
      fullPath = fullPath.replace('%2Fcounterparty/main', '').replace('%2Fbasic-info', '')
    }
    window.location.href = `${loginUrl}?url=${fullPath}`
  }
}
const onClick = (value: string) => {
  if (value === props.modelValue) value = ''
  emit('update:modelValue', value)
}

const login: string = 'header.login';
const profile: string = 'modals.mobile_navigation.type_profile';


</script>
<template>
  <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
    <div class="grid w-full grid-cols-3 justify-items-center">
      <slot>
        <button
          v-for="(item, index) in items"
          :key="index"
          class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-blue-700/20 lg:hover:text-blue-700"
          :class="{ grow, 'text-blue-700': modelValue === item.value }"
          @click="onClick(item.value)"
        >
          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
            <template v-if="Object.prototype.hasOwnProperty.call(item, 'icon')">
              <component
                :is="item.icon"
                class="h-6 w-6"
              />
            </template>
            {{ t(item.label) }}
          </span>
        </button>
        <button
          v-show="isAuthenticated"
          @click="onClick('profile')"
          class="h-16 w-auto min-w-16 max-w-[168px]"
        >
          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
            <avatar
              class="bg-gray outline-blue h-6 w-6 rounded-full"
            />
            {{ t(profile) }}
          </span>
        </button>
        <button
          v-show="!isAuthenticated && showLogIn"
          class="h-16 w-auto min-w-16 max-w-[168px]"
          @click="goAuth"
        >
          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
            <icon-logout class="lg:h-6 lg:w-6" />
            {{ t(login) }}
          </span>
        </button>
      </slot>
    </div>
  </header>
</template>

<style scoped></style>
