<template>
  <div
    relative-element-selector="#eshop-content"
    class="navbar eshop-top-menu navbar-dark navbar-expand-md py-2 py-md-0"
  >
    <b-navbar-toggle target="nav_collapse" class="mx-2" />
    <div class="d-md-none float-left">
      <b-img :src="companyLogo" class="icon-size-2 mx-2" />
      <span class="align-self-center text-white font-size-6">
        {{ brandName }}
      </span>
    </div>
    <b-collapse is-nav id="nav_collapse" class="container">
      <b-navbar-nav class="mr-auto z-unset">
        <!-- left alligned menu items -->
        <template v-for="(route, index) in sortedMenu">
          <component
            :is="navComponent(route)"
            class="text-white"
            @click="processClick(route, $event)"
            v-if="(!route.children || route.children.length === 0) && route.topMenu.position !== 'right'"
            :to="generateRoute(route.path)"
            :href="generateLink(route.path)"
            :key="`right-${index}`"
            data-qa="eshop-menu-header-back-to-dashboard-link"
          >
            {{ translateName(route) }}
          </component>
        </template>
        <template v-for="(route, index) in sortedMenu">
          <b-nav-item-dropdown
            v-if="route.children && route.children.length !== 0 && route.topMenu.position !== 'right'"
            :text="translateName(route)"
            :key="`right-dropdown-${index}`"
            :data-qa="`eshop-menu-header-${(/country/.test(route.path) && 'region') || 'language'}-dropdown`"
            :disabled="loadingCart"
          >
            <template v-slot:button-content v-if="/country/.test(route.path)">
              <b-spinner small v-show="loadingCart" class="mr-2" />
              <span v-show="!loadingCart">{{ translateName(route) }}</span>
            </template>
            <b-dropdown-item
              v-for="(children, subIndex) in route.children"
              :to="generateRoute(children.path)"
              :href="generateLink(children.path)"
              :disabled="children.topMenu.readonly"
              :key="`right-dropdown-${index}-${subIndex}`"
              :data-qa="`eshop-menu-header-${$helpers.kebabCase(translateName(children))}-dropdown-item`"
            >
              {{ translateName(children) }}
            </b-dropdown-item>
          </b-nav-item-dropdown>
        </template>
      </b-navbar-nav>
      <b-navbar-nav class="ml-auto z-unset">
        <!-- right alligned menu items -->
        <template v-for="(route, index) in sortedMenu"
          ><component
            :is="navComponent(route)"
            @click="processClick(route, $event)"
            class="text-white"
            v-if="(!route.children || route.children.length === 0) && route.topMenu.position === 'right'"
            :to="generateRoute(route.path)"
            :href="generateLink(route.path)"
            :key="`right-${index}`"
          >
            {{ translateName(route) }}
          </component></template
        >
        <template v-for="(route, index) in sortedMenu">
          <b-nav-item-dropdown
            v-if="route.children && route.children.length !== 0 && route.topMenu.position === 'right'"
            :text="translateName(route)"
            :key="`right-dropdown-${index}`"
          >
            <b-dropdown-item
              v-for="(children, subIndex) in route.children"
              :to="generateRoute(children.path)"
              :href="generateLink(children.path)"
              :disabled="children.topMenu.readonly"
              :key="`right-dropdown-${index}-${subIndex}`"
            >
              {{ translateName(children) }}
            </b-dropdown-item>
          </b-nav-item-dropdown>
        </template>
      </b-navbar-nav>
    </b-collapse>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { BRAND_NAME } from '@/config/defaults'

const MenuHeader = {
  name: 'menu-header',
  data() {
    return {
      brandName: BRAND_NAME,
      companyLogo: this.$const.constImage.COMPANY_LOGO,
    }
  },
  computed: {
    ...mapGetters(['getSelectedCountryName', 'getSelectedLanguageName', 'isLoading']),
    ...mapGetters('topMenu', ['sortedMenu']),
    loadingCart() {
      return this.isLoading(['productsAddingToCart', 'loadingCart'])
    },
  },
  methods: {
    processClick: function(route, event) {
      if (route.topMenu.onClick) {
        if (route.topMenu.onClick(route, event) === false) {
          event.preventDefault()
        }
      }
    },
    navComponent: function(route) {
      if (route.topMenu.readonly) {
        return 'b-nav-text'
      } else {
        return 'b-nav-item'
      }
    },
    generateRoute: function(url) {
      if (url.match(/^(http(s)?|ftp):\/\//)) {
        return null
      }
      return url
    },
    generateLink: function(url) {
      if (url.match(/^(http(s)?|ftp):\/\//)) {
        return url
      }
      return null
    },
    translateName: function(route) {
      if (route.topMenu.displayName) {
        if (route.topMenu.displayName.constructor === Array) {
          return this.$t(...route.topMenu.displayName)
        } else {
          if (route.topMenu.displayName === '--SELECTED_COUNTRY_NAME--') {
            return this.getSelectedCountryName
          } else if (route.topMenu.displayName === '--SELECTED_LANGUAGE_NAME--') {
            return this.getSelectedLanguageName
          } else {
            return this.$t(route.topMenu.displayName)
          }
        }
      } else {
        return route.name
      }
    },
  },
}

export default MenuHeader
</script>
