<template>
  <header class="BlkHeader fixed top-0 right-0 left-0 z-10 flex h-72 text-black bg-white shadow-header">
    <div class="BlkHeader__container container grid grid-flow-col grid-cols-header gap-24 items-center justify-between w-full h-full mx-auto px-16">
      <!-- <nav> -->
      <div class="BlkHeader__logo-wrapper grid grid-flow-col auto-cols-max gap-16 items-center">
        <router-link class="BlkHeader__logo pb-8" to="/">
          <img
            src="@/assets/img/static-icons/logo.svg"
            alt="Belkins.io"
            height="32"
            width="90"
          />
        </router-link>
      </div>

<!--      TODO  Fix hydration -->
      <Desktop :navigation="navigation" class="BlkHeader__desktop-navigation" />

      <div class="BlkHeader__spacer" />

      <div class="grid grid-flow-col auto-cols-max gap-16 items-center">
        <div class="phone-box flex items-center h-40 pr-16 border-r-1 border-b-gray-400">
          <a
            :href="`tel:${phoneNumber}`"
            class="BlkHeader__phone-wrapper flex items-center content-between text-gray-900 text-14"
            @click="onPhoneClick"
          >
            <img
              src="@/assets/img/static-icons/phone-3.svg"
              class="mr-6"
              alt="phone-icon"
              width="10"
              height="10"
            />
            {{ phoneNumber }}
          </a>
        </div>
        <VButton type="primary" size="small" @click="bookConsultation">Book a Call</VButton>
      </div>
    </div>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { contacts } from '@/utils/contacts';
import { BOOK_CALL_LINK, BOOK_CALL_PHONE_NUMBER } from '@/utils/constants';
import isCountryBanned from '@/utils/isCountryBanned';

import VButton from '@/components/ui/common/VButton.vue';
import Desktop from '@/components/layout/TheHeader/Desktop/Desktop.vue';

import {
  howItWorks,
  solutions,
  resources,
  more,
} from '@/components/layout/navigation';

import logo from '@/assets/img/static-icons/logo.svg?url';
import phoneIcon from '@/assets/img/static-icons/phone-3.svg?url';

export default defineComponent({
  components: { VButton, Desktop },

  async setup() {
    more!.items[0]!.categories![1].numberPositions = 0;

    const navigation = {
      solutions: {
        ...solutions,
        items: solutions.items.slice(0, 4),
      },
      howItWorks,
      resources: {
        ...resources,
        items: resources.items.slice(1, 6),
      },
      more,
    };

    return { navigation };
  },

  data: () => ({
    contacts,
    phoneNumber: BOOK_CALL_PHONE_NUMBER,
    searchIsOpen: false,
    popupIsOpened: false,
    logo,
    phoneIcon,
  }),

  methods: {
    onPhoneClick() {
      (window as any).gtag('event', 'header-phone-click');
    },

    bookConsultation() {
      if (isCountryBanned()) {
        this.popupIsOpened = true
        return;
      }

      window.open(BOOK_CALL_LINK, '_target');
    },
  },
});
</script>