<template>
  <div class="layout">
    <ClientOnly>
      <UHeader
        title="AT Golden"
        :toggle="false"
        :ui="{
          root: 'fixed bg-transparent w-full',
          left: 'relative flex items-center w-full',
          container: 'gap-0',
          right: 'hidden',
        }"
      >
        <template #left>
          <NuxtLink to="/" class="text-lg flex items-center gap-2">
            <Icon name="my-icon:main-logo" :style="{ fontSize: isMobile ? '34px' : '48px' }" />
            <div v-if="!isMobile">
              AT Golden
            </div>
          </NuxtLink>

          <div class="absolute left-1/2 transform -translate-x-1/2">
            <UTabs v-model="activeTab" :size="isMobile ? 'md' : 'xl'" :content="false" :items="tabs" />
          </div>

          <!--          <UColorModeButton /> -->
          <div class="ml-auto">
            <UButton
              :href="route.path.startsWith('/about-us') ? '/' : '#contacts'"
              :size="isMobile ? 'md' : 'xl'"
              :label="route.path.startsWith('/about-us') ? 'Вернуться' : 'Связаться'"
            />
          </div>
        </template>
      </UHeader>
    </ClientOnly>

    <UMain>
      <slot />
    </UMain>

    <BaseFooter />

    <PromotionModal v-model="open" />
  </div>
</template>

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'
import { useMediaQuery } from '@vueuse/core'
import BaseFooter from '~/components/BaseFooter.vue'
import PromotionModal from '~/components/PromotionModal.vue'

const isMobile = useMediaQuery('(max-width: 1280px)')

const router = useRouter()
const route = useRoute()

const open = ref(false)
const toast = useToast()

const tabs = computed<TabsItem[]>(() => [
  {
    label: isMobile.value ? '' : 'Главная',
    icon: 'i-lucide-home',
    value: '/',
    route: '/',
  },
  {
    label: isMobile.value ? '' : 'Недвижимость',
    icon: 'i-lucide-building-2',
    value: 'nedvizhimost',
    route: '/nedvizhimost',
  },
  {
    label: isMobile.value ? '' : 'Авто',
    icon: 'i-lucide-car',
    value: 'transport',
    route: '/transport',
  },
])

function showToast() {
  if (toast?.toasts?.value?.length > 0) {
    return
  }

  toast.add({
    title: 'Уникальное предложение !',
    description: 'Покупка машины под ключ, Кыргызстан',
    duration: 30000,
    actions: [{
      icon: 'i-lucide-car',
      label: 'Подробнее',
      color: 'neutral',
      variant: 'outline',
      onClick: () => {
        open.value = true
      },
    }],
  })
}

onMounted(() => {
  showToast()
})

const activeTab = ref(route?.path.split('/')[1] || '/')

watch(() => activeTab.value, () => {
  const tab = tabs.value.find(tab => tab.value === activeTab.value)
  router.push(tab?.route)
})

watch(() => route?.path, () => {
  const routerPath = route?.path?.split('/')[1]

  if (routerPath === activeTab.value) {
    return
  }

  activeTab.value = routerPath || '/'
})
</script>
