<script setup lang="ts">
import AdataLogo from '#adata-ui/icons/adata-logo.vue'
import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
import NewFooterAccordion from '#adata-ui/components/navigation/footer/ui/new-footer-accordion.vue'
import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
import { PAGES } from '#adata-ui/shared/constans/pages'
import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'

const year = new Date().getFullYear()
const { t, locale } = useI18n()
const { myLayer } = useAppConfig()

const socialMedia = [
  {
    icon: LinkedinIcon,
    link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
    name: 'Linkedin'
  },
  {
    icon: YouTubeIcon,
    link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
    name: 'YouTube'
  },
  {
    icon: InstagramIcon,
    link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
    name: 'Instagram'
  },
  {
    icon: TelegramIcon,
    link: 'https://t.me/adatakz_official',
    name: 'Telegram'
  },
  {
    icon: FaceBookIcon,
    link: 'https://www.facebook.com/adata.kz',
    name: 'Facebook'
  },
  {
    icon: TikTokIcon,
    link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
    name: 'Tiktok'
  }
]

const mainLinks = {
  services: {
    title: 'footer.services',
    items: [
      [
        {
          title: 'footer.counterparties.title',
          link: buildLocalizedUrl(locale.value, myLayer.pkUrl, ''),
        },
        {
          title: 'footer.fines.title',
          link: buildLocalizedUrl(locale.value, myLayer.avtoUrl, PAGES.fines.main),
        },
        {
          title: 'footer.work.title',
          link: myLayer.workUrl + PAGES.work.vacancy,
        },
        {
          title: 'footer.analytics.title',
          link: buildLocalizedUrl(locale.value, 'https://analytics-new.adata.kz', PAGES.analytics.main),
        },
        {
          title: 'footer.tenders.title',
          link: myLayer.tenderUrl + PAGES.tender.main,
        }
      ],
      [
        {
          title: 'footer.compliance.title',
          link: myLayer?.complianceUrl + PAGES.compliance.l,
          isNew: true
        },
        {
          title: 'header.products.edo.label',
          link: (myLayer?.edoUrl ?? 'https://edo.adata.kz') + PAGES.edo.l,
          isNew: true
        },
        {
          title: 'footer.fea.title',
          link: buildLocalizedUrl(locale.value, myLayer.tnvedUrl, PAGES.fea.main),
          isNew: true
        },
      ]
    ]
  },
  useful: {
    title: 'footer.useful',
    link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.usefulMain),
    items: [
      [
        {
          title: 'footer.info.api',
          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.apiDescription),
        },
        {
          title: 'footer.info.userAgreement',
          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.userAgreement),
        },
        {
          title: 'footer.info.privacyPolicy',
          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.privacy),
        },
        {
          title: 'footer.info.vacancy',
          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.vacancy),
        },
        {
          title: 'footer.info.counterparty',
          link: buildLocalizedUrl(locale.value, myLayer.pkUrl, PAGES.pk.counterparty),
        },
      ]
    ]
  }
}

const contactLinks = {
  title: 'footer.contacts.title',
  link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.contacts),
  items: [
    {
      title: t('footer.contacts.address'),
      link: 'https://go.2gis.com/30j2f',
      startIcon: AIconLocation,
      endIcon: null,
    },
    {
      title: '+7 (747) 120 34 67',
      link: 'tel:+77471203467',
      startIcon: AIconPhone,
      endIcon: null,
    },
    {
      title: 'info@adata.kz',
      link: 'mailto:info@adata.kz',
      startIcon: AIconMail,
      endIcon: null,
    },
    {
      title: t('footer.contacts.goToChat'),
      link: 'https://api.whatsapp.com/send?phone=77712289041',
      startIcon: null,
      endIcon: AIconExpandWindow,
      class: 'font-bold',
    },
  ],
}

</script>

<template>
  <footer
    id="footer"
    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
  >
    <div class="a-container mobile-padding py-5 text-white flex flex-col lg:flex-row justify-between gap-8">
      <div class="flex flex-col gap-8 justify-between">
        <div class="flex flex-col gap-4">
          <adata-logo
            filled
            :font-controlled="false"
            class="shrink-0"
          />

          <p class="text-sm">
            {{ t('footer.subtitle') }}
          </p>

          <div class="hidden lg:flex gap-8">
            <nuxt-link
              v-for="(social, idx) in socialMedia"
              :key="idx"
              target="_blank"
              :to="social.link"
              :aria-label="social.name"
            >
              <span class="visually-hidden"> {{ social.name }}</span>
              <component
                :is="social.icon"
                filled
                :font-controlled="false"
                class="social-icon size-7"
              />
            </nuxt-link>
          </div>
        </div>

        <p class="hidden lg:block text-[10px]">
          {{ year }} © {{ t('footer.LLP') }} "Alldata"
        </p>
      </div>

      <div class="flex gap-6 lg:gap-[75px] flex-col lg:flex-row">
        <div class="flex gap-[18px] lg:gap-[75px] flex-col lg:flex-row">
          <div
            v-for="(item, idx) in mainLinks"
            :key="idx"
          >
            <new-footer-accordion
              :label="t(item.title)"
              :link="item?.link?.replace(/\/$/, '')"
              :content="item.items"
            />
          </div>
        </div>

        <div class="flex flex-col gap-2 items-start">
          <nuxt-link
            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
            :to="contactLinks.link?.replace(/\/$/, '')"
          >
            {{ t(contactLinks.title) }}
          </nuxt-link>

          <div class="flex flex-col gap-3 lg:gap-2">
            <div
              v-for="(link, idx) in contactLinks.items"
              :key="idx"
              class="flex gap-2 items-center"
            >
              <nuxt-link
                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
                :class="link.class"
                :to="link.link?.replace(/\/$/, '')"
              >
                <component
                  :is="link.startIcon"
                  v-if="link.startIcon"
                  class="size-4 shrink-0"
                />

                <p>{{ link.title }}</p>

                <component
                  :is="link.endIcon"
                  v-if="link.endIcon"
                  class="size-4 shrink-0"
                />
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>

      <div class="lg:hidden flex gap-8 flex-wrap">
        <nuxt-link
          v-for="(social, idx) in socialMedia"
          :key="idx"
          target="_blank"
          :to="social.link"
          :aria-label="social.name"
        >
          <component
            :is="social.icon"
            filled
            :font-controlled="false"
            class="social-icon size-7"
          />
        </nuxt-link>
      </div>

      <p class="lg:hidden text-[10px]">
        {{ year }} © {{ t('footer.LLP') }} "Alldata"
      </p>
    </div>
  </footer>
</template>
