<script setup lang="ts">
import { ref } from 'vue'
import IconLocation from '#adata-ui/icons/location.vue'
import IconMail from '#adata-ui/icons/mail.vue'
import IconClock from '#adata-ui/icons/clock.vue'
import IconPhone from '#adata-ui/icons/phone.vue'
import IconWhatsapp from '#adata-ui/icons/whatsapp.vue'
import ExpandWindow from '#adata-ui/icons/expand-window.vue'

type Emits = {
  (e: 'pushMain'): void
}
const { t } = useI18n()
const isOpen = ref(false)
const tab = ref('allData')
const emits = defineEmits<Emits>()

const tabOptions = [
  {
    name: t('mobile_navigation.contacts.first_type'),
    key: 'allData'
  },
  {
    name: t('mobile_navigation.contacts.second_type'),
    key: 'allDataConsulting'
  }
]
const sideLinks = <any>{
  allData: [
    {
      title: t('mobile_navigation.contacts.allData.address'),
      info: [
        {
          label: t('mobile_navigation.contacts.allData.address_info'),
          icon: IconLocation
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.email'),
      info: [
        {
          label: 'info@adata.kz',
          icon: IconMail,
          to: 'mailto:info@adata.kz'
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.mode'),
      info: [
        {
          label: t('mobile_navigation.contacts.allData.mode_info'),
          icon: IconClock
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.sales_department'),
      info: [
        {
          label: '+7 (771) 779 49 60',
          icon: IconWhatsapp,
          to: 'https://api.whatsapp.com/send/?phone=77717794960'
        },
        {
          label: '+7 (747) 225 07 84',
          icon: IconWhatsapp,
          to: 'https://api.whatsapp.com/send/?phone=77472250784'
        },
        {
          label: '+7 (771) 709 32 84',
          icon: IconWhatsapp,
          to: 'https://api.whatsapp.com/send/?phone=77717093284'
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.technical_support'),
      info: [
        {
          label: t('mobile_navigation.contacts.allData.support_link_title'),
          icon: ExpandWindow,
          to: 'https://api.whatsapp.com/send/?phone=77712289041'
        }
      ]
    }
  ],
  allDataConsulting: [
    {
      title: t('mobile_navigation.contacts.allData.address'),
      info: [
        {
          label: t('header.contacts.astana.adress.subtitle'),
          icon: IconLocation
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.email'),
      info: [
        {
          label: 'info@adata-c.kz',
          icon: IconMail,
          to: 'mailto:info@adata-c.kz'
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.mode'),
      info: [
        {
          label: t('header.contacts.astana.schedule.subtitle'),
          icon: IconClock
        }
      ]
    },
    {
      title: t('mobile_navigation.contacts.allData.sales_department'),
      info: [
        {
          label: '+7 700 744 00 10',
          icon: IconWhatsapp,
          to: 'https://api.whatsapp.com/send/?phone=77007440010'
        }
      ]
    }
  ]
}
const currentInfo = ref(sideLinks.allData)

watch(tab, (e) => {
  if (e) {
    currentInfo.value = sideLinks[e]
  }
})
</script>

<template>
  <a-modal v-model="isOpen" :title="t('modals.mobile_navigation.type_contacts')">
    <div class="flex flex-col gap-4">
      <div class="h-[1px] w-full bg-deepblue-900/5" />
      <div>
        <a-pill-tabs v-model="tab" :options="tabOptions" view="gray" />
      </div>
      <div class="flex h-[40vh] flex-col gap-2 overflow-auto sm:h-[300px]">
        <div v-for="items in currentInfo" :key="items.title" class="flex flex-col gap-2">
          <p class="font-semibold">{{ items.title }}</p>
          <div class="flex flex-wrap gap-4 text-sm">
            <template v-for="item in items.info">
              <a
                v-if="item.to"
                :href="item.to"
                class="flex items-center gap-1 text-blue-700 dark:text-blue-500"
              >
                <component :is="item.icon" class="h-[16px] w-[16px] min-w-[16px]" />
                {{ item.label }}
              </a>
              <div v-else class="flex items-center gap-1">
                <component :is="item.icon" class="h-[16px] w-[16px] min-w-[16px]" />
                {{ item.label }}
              </div>
            </template>
          </div>
        </div>
      </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 rounded-md bg-gray-50 px-4 py-3 dark:bg-gray-800"
      >
        <a-icon-menu />
        {{ t('modals.mobile_navigation.return_button') }}
      </nuxt-link>
    </template>
  </a-modal>
</template>

<style scoped></style>
