<script setup>
import { toast } from 'bulma-toast'
import navsLag from './assets/langs/navs.js'

// Use the centralized role menu composable
const { getMenuType } = useRoleMenu()

// This will be set using the composable method
const defaultSideBarMenu = ref('Menu')


const organizations = useCookie('logship_organizations')
const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')

const user = useCookie('logship_user')
const role = ref({})
const config = useRuntimeConfig()
const router = useRouter()
const activeSave = useActiveSave()

const filteredData = organizations._value.filter(item => item.id === organizationId._value);

const lang = ref('en-US')
const getLang = computed(() => {
  return navsLag(lang.value)
})
onMounted(() => {
  if(document.documentElement.getAttribute('lang')) {
    lang.value = document.documentElement.getAttribute('lang')
  }
  defaultSideBarMenu.value = getMenuType()
})

const globalSearch = ref('')
const globalSearchRef = ref(null)
const globalSearchModal = ref(false)
const openGlobalSearchModal = () => {
  if(globalSearchRef.value) {
    globalSearchRef.value.blur()
  }
  globalSearchModal.value = true
}

const openLink = (link) => {
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    router.push(link)
  }
}
</script>

<template>
  <nav class="navbar zIndex-1 hidebiggermob">
    <div class="navbar-brand">
      <div class="navbar-burger burger" data-target="navMenubd-example">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div id="navMenubd-example" class="navbar-menu" style="padding: 0 20px;">
      <div class="navbar-start">
        <!--        <div class="navbar-item has-dropdown is-hoverable">-->
        <!--          <a class="navbar-link" href="/documentation/overview/start/">-->
        <!--            {{ getLang['admin_panel'] }}-->
        <!--          </a>-->
        <!--          <div class="navbar-dropdown ">-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['setup'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['configuration'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['marketplaces'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['price_portals'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['import_export'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['status'] }}-->
        <!--            </a>-->

        <!--            <hr class="navbar-divider">-->
        <!--            <div class="navbar-item">-->
        <!--              <div>-->
        <!--                <p class="is-size-6-desktop">-->
        <!--                  <strong class="has-text-info">{{ config.public.githash }}</strong>-->
        <!--                </p>-->

        <!--                <small>-->
        <!--                  <a class="bd-view-all-versions" href="#">{{ getLang['view_all_versions'] }}</a>-->
        <!--                </small>-->

        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="navbar-item has-dropdown is-hoverable is-mega">-->
        <!--          <div class="navbar-link flex">-->
        <!--            {{ getLang['quick_access'] }} <span class="tag is-info ml-2">{{ getLang['update'] }}</span>-->
        <!--          </div>-->
        <!--          <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">-->
        <!--            <div class="container is-fluid">-->
        <!--              <div class="columns">-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['bpartner'] }}</h1>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/partners/partners')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['manage'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['show_all_bpartner'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/partners/partners/create')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['create'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['create_new_bpartner'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/2017/08/03/list-of-tags/')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['communicate'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['sent_message'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['products'] }}</h1>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/materials/products')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['manage'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['show_all_products'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/materials/products/create')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['create'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['create_new_products'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['orders'] }}</h1>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/sales/orders')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['manage'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['show_all_orders'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/sales/orders/create')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['create'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['create_new_sales_order'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['erp_menu'] }}</h1>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['overview'] }}-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['modifiers'] }}-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['columns'] }}-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['layout'] }}-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->

        <!--            <hr class="navbar-divider">-->
        <!--            <div class="navbar-item">-->
        <!--              <div class="navbar-content">-->
        <!--                <div class="level is-mobile">-->
        <!--                  <div class="level-left">-->
        <!--                    <div class="level-item">-->
        <!--                      <strong>{{ getLang['stay_up_to_date'] }}</strong>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                  <div class="level-right">-->
        <!--                    <div class="level-item">-->
        <!--                      <a class="button bd-is-rss is-small" href="#">-->
        <!--                      <span class="icon is-small">-->
        <!--                        <i class="fa fa-rss"></i>-->
        <!--                      </span>-->
        <!--                        <span>{{ getLang['subscribe'] }}</span>-->
        <!--                      </a>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="navbar-item has-dropdown is-hoverable">-->
        <!--          <div class="navbar-link">-->
        <!--            {{ getLang['upgrade'] }}-->
        <!--          </div>-->
        <!--          <div id="moreDropdown" class="navbar-dropdown ">-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              <div class="level is-mobile">-->
        <!--                <div class="level-left">-->
        <!--                  <div class="level-item">-->
        <!--                    <p>-->
        <!--                      <strong>{{ getLang['change_subscription'] }}</strong>-->
        <!--                      <br>-->
        <!--                      <small>{{ getLang['upgrade_or_downgrade_account'] }}</small>-->
        <!--                    </p>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--                <div class="level-right">-->
        <!--                  <div class="level-item">-->
        <!--                  <span class="icon has-text-info">-->
        <!--                    <i class="fa fa-plug"></i>-->
        <!--                  </span>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </a>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <a class="navbar-item " href="#">-->
        <!--          <span class="bd-emoji">🎨</span> &nbsp;{{ getLang['upcoming'] }}-->
        <!--        </a>-->
        <div class="navbar-item">
          <div class="group w-220px" :class="activeSave ? 'pointerEvents-none opacity-0.6' : ''">
            <input ref="globalSearchRef" type="search" v-model="globalSearch" class="input groupItem" @keyup.enter="openGlobalSearchModal" placeholder="Search here..." />
            <button type="button" class="button groupItem" @click="openGlobalSearchModal">
              <i class="pointerEvents-none menu-icon tf-icons ti ti-search fg-hexfff"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <!--<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
        <span class="icon" style="color: #333;">
          <i class="fa fa-github"></i>
        </span>
        </a>
        <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
        <span class="icon" style="color: #55acee;">
          <i class="fa fa-twitter"></i>
        </span>
        </a>-->
        <div class="navbar-item">
          <div class="field is-grouped">
            <!--            <p class="control">-->
            <!--              <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">-->
            <!--              <span class="icon">-->
            <!--                <i class="fa fa-twitter"></i>-->
            <!--              </span>-->
            <!--                <span>-->
            <!--                Tweet-->
            <!--              </span>-->
            <!--              </a>-->
            <!--            </p>-->

            <span style="font-weight:bold;"><span style="font-weight:normal; color: grey; font-size: 14px; padding-bottom: 2px;">Merchant:</span> {{ filteredData[0].name }}</span>


            <!--            <p class="control">-->
            <!--              <a class="button is-primary" href="#">-->
            <!--              <span class="icon">-->
            <!--                <i class="fa fa-download"></i>-->
            <!--                  <UIcon name="i-mdi-rotate-3d-variant" />-->
            <!--              </span>-->
            <!--                <span>{{ filteredData[0].name }}</span>-->
            <!--              </a>-->
            <!--            </p>-->
          </div>
        </div>
      </div>
    </div>
  </nav>
  <Teleport to="body">
    <SearchModal v-model="globalSearchModal" v-model:searchQuery="globalSearch" />
  </Teleport>
</template>

<style >

.navbar-item.is-mega {
  position: static;
  background-color: #F8F8F8;
  .is-mega-menu-title {
    margin-bottom: 0;
    padding: .375rem 1rem;
    background-color: #F8F8F8;
  }
}

div#navMenubd-example,
.navbar-start,
main nav {
  background-color: #F8F8F8;
  box-shadow: none;
}

@media (max-width: 1023px) {
  .hidebiggermob {
    display:none;
  }
}

div#navMenubd-example {
  padding-left: 0px !important;
}

.navbar-item {
  padding-left: 5px !important;
}

input.input.groupItem {
  margin-right: 5px;
}

nav.sd-none {
  height: 41px;
}
</style>