<script setup>
const sideBar = useSideBar()
const user = useCookie('logship_user')
const role = ref({})
const config = useRuntimeConfig()


onMounted(() => {
  const getRole = localStorage.getItem('idempiere_role')
  if(getRole) {
    role.value = JSON.parse(getRole)
  }
})

const dropDownHandler = (e) => {
  if(e.target.parentElement.classList.contains('show')) {
    e.target.parentElement.classList.remove('show')
  } else {
    e.target.parentElement.classList.add('show')
  }
}

const dropItemHandler = (e) => {
  if(e.target.parentElement.parentElement.classList.contains('show')) {
    e.target.parentElement.parentElement.classList.remove('show')
  } else {
    e.target.parentElement.parentElement.classList.add('show')
  }
}

const logout = async () => {
  await $fetch('/api/idempiere-auth/logout', {
    method: 'POST',
    headers: useRequestHeaders(['cookie'])
  })

  location.href = '/signin'
}

const goTo = (toPath) => {
  location.href = toPath
}

const showSideBar = () => {
  sideBar.value = !sideBar.value
}
</script>

<template>
  <div class="navBar navbar-detached items-center pi-fixed py-0px" style="z-index: revert-layer;">
    <div class="navWrap">
      <div class="navStart">
        <button type="button" class="navToggler navMobile" @click="showSideBar">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
          </svg>
        </button>
        <a href="#" class="navBrand d-flex items-center">
          <span class="app-brand-logo demo">
            <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                fill="#7367F0" />
              <path
                opacity="0.06"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
                fill="#161616" />
              <path
                opacity="0.06"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
                fill="#161616" />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                fill="#7367F0" />
            </svg>
          </span>
          <span class="app-brand-text demo menu-text fw-bold">{{ config.public.solutionname }}</span>
        </a>
        <!--<button type="button" class="navToggler navMobile">
          Icon 1
        </button>-->
        <button type="button" class="navToggler navMobile dropDown">
          <div class="dropDownToggler d-flex items-center" @click="dropDownHandler">
            <span class="align-right pointerEvents-none pe-2">{{ user?.Name || '' }} <br/> {{ role?.name || '' }}</span>
            <div class="d-none avatar pointerEvents-none"></div>
          </div>
          <div class="dropDownBackdrop" @click="dropDownHandler"></div>
          <div class="dropDownMenu dropDownRight">
            <a href="#" class="dropDownItem" @click="dropItemHandler($event); goTo('/accounts/profile');">User Profile</a>
            <a href="#" class="dropDownItem" @click="dropItemHandler($event); goTo('/organizations');">Switch Organization</a>
            <a href="#" class="dropDownItem" @click="dropItemHandler($event); goTo('/settings/general');">Settings</a>
            <hr class="dropDownDivider">
            <a href="#" class="dropDownItem" @click="dropItemHandler($event); logout();">Logout</a>
          </div>
        </button>
      </div>
      <div class="navEnd">
        <div class="navMenu"></div>
        <div class="navMenu">
          <!--<a href="#" class="navItem">Item 3</a>-->
          <div class="navItem dropDown">
            <div class="dropDownToggler d-flex items-center" @click="dropDownHandler">
              <span class="align-right pointerEvents-none pe-2">{{ user?.Name || '' }} <br/> {{ role?.name || '' }}</span>
              <div class="d-none avatar pointerEvents-none"></div>
            </div>
            <div class="dropDownBackdrop" @click="dropDownHandler"></div>
            <div class="dropDownMenu dropDownRight">
              <a href="#" class="dropDownItem" @click="dropItemHandler($event); goTo('/accounts/profile');">User Profile</a>
              <a href="#" class="dropDownItem" @click="dropItemHandler($event); goTo('/organizations');">Switch Organization</a>
              <a href="#" class="dropDownItem" @click="dropItemHandler($event); goTo('/settings/general');">Settings</a>
              <hr class="dropDownDivider">
              <a href="#" class="dropDownItem" @click="dropItemHandler($event); logout();">Logout</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>