<template>
    <nav id="navBar" class="navbar navbar-expand-xl">
        <div class="container-fluid">
          <router-link class="navbar-brand" id="home" :to="toSavingGoals()">
                <img id="logoImg" src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
                <span id="logo" class="text-white">SpareSti</span>
            </router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Bytt navigasjon">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
                    <li class="nav-item">
                      <router-link data-cy="savingGoals" class="nav-link text-white"
                                   :to="toSavingGoals()"><img
                                src="@/assets/icons/saving.svg">Sparemål</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link data-cy="leaderboard" class="nav-link text-white"
                                   :to="toLeaderboard()"><img
                                src="@/assets/icons/leaderboard.svg">Ledertavle</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link data-cy="news" class="nav-link text-white" :to="toNews()"><img
                          src="@/assets/icons/newsletter.svg">Nyheter</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link data-cy="store" class="nav-link text-white" :to="toStore()"><img
                          src="@/assets/icons/storefront.svg">Butikk</router-link>
                    </li>
                    <li class="nav-item dropdown">
                        <a data-mdb-dropdown-init class=" nav-link dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
                           role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          <img src="/src/assets/icons/bell-white.svg">
                          <span v-if="counter > 0" class="badge rounded-pill badge-notification bg-danger">{{counter}}</span>
                        </a>
                        <ul v-if="counter > 0" class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                          <li v-for="(array,key) in notifMap" :key="key" >
                            <div class="d-flex align-items-center">
                              <div v-if="array[1][0] === '1'" class="flex-shrink-0">
                                <img src="/src/assets/icons/medal.png" alt="Varslingsikon" class="notification-icon">
                              </div>
                              <div v-if="array[1][0] === '2'" class="flex-shrink-0">
                                <img src="/src/assets/userprofile.png" alt="Varslingsikon" class="notification-icon">
                              </div>
                              <div v-if="array[1][0] === '3'" class="flex-shrink-0">
                                <img src="/src/assets/icons/piggybank.svg" alt="Varslingsikon" class="notification-icon">
                              </div>
                              <div class="flex-grow-1 ms-3">
                                <router-link class="not-item dropdown-item"   :to="getPath(array[1][0])">{{array[1][1]}}</router-link>
                              </div>
                            </div>
                          </li>
                        </ul>
                        <ul v-else class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                          <li>Ingen varslinger</li>
                        </ul>
                    </li>
                    <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
                        <a data-cy="user"
                           class="nav-link dropdown-toggle username-text text-white "
                           href="#" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="@/assets/icons/person.svg">{{useUserInfoStore().firstname }}
                        </a>
                        <ul class="dropdown-menu dropdown-username-content">
                            <li><router-link data-cy="profile"
                              class="dropdown-item dropdown-username-link" :to="toUserProfile()"><img
                                  src="@/assets/icons/black_person.svg">Min profil</router-link></li>
                            <li v-if="useUserInfoStore().isPremium"><router-link data-cy="budget"
                              class="dropdown-item dropdown-username-link" :to="toBudget()"><img
                              src="@/assets/icons/budget.svg">Budjsett</router-link></li>
                            <li><router-link data-cy="friends"
                              class="dropdown-item dropdown-username-link" :to="toFriends()"><img
                                src="@/assets/icons/black_friends.svg">Venner</router-link></li>
                            <li><router-link data-cy="settings"
                              class="dropdown-item dropdown-username-link" :to="toSetting()"><img
                                src="@/assets/icons/settings.svg">Innstillinger</router-link></li>
                            <li><router-link data-cy="feedback"
                              class="dropdown-item dropdown-username-link" :to="toFeedback()"><img
                                src="@/assets/icons/feedback.svg">Tilbakemelding</router-link></li>
                            <li><router-link data-cy="admin"
                              class="dropdown-item dropdown-username-link" :to="toSetting()"><img
                                src="@/assets/icons/admin.svg">Admin</router-link></li>
                            <li style="cursor: pointer"><a data-testid="logout" class="dropdown-item dropdown-username-link" ref="#" @click="toLogout()"><img
                                src="@/assets/icons/logout.svg">Logg ut</a></li>
                        </ul>
                    </li>
                    <li v-else class="nav-item">
                        <a class="nav-link" style="cursor: pointer;" href="#" @click="toLogout">Logg inn</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
import {onMounted, ref} from "vue";



const router = useRouter();

const userStore: any = useUserInfoStore();

let profileImage: any = ref('');

if (useUserInfoStore().profileImage !== 0) {
    profileImage = 'http://localhost:8080/api/images/' + useUserInfoStore().profileImage;
} else {
    profileImage = 'src/assets/userprofile.png';
}

//Hashmap that contains the path to the Badges, The Friend, The dashboard etc.
//The key value pair is the message of the notification and the path of the route
let notifMap = ref (new Map<number, any[]>);

let notifId = ref(0);

let path = ref('#');

let counter = ref(0)


/* id: 0 -> /roadmap
   id: 1 -> /profile
   id: 2 -> /friend
 */



function getNotification(){
  //axios call
  let response: any = ref( ['1', 'You have recived a award for getting 200 points'])
  let response2: any = ref( ['2', 'You have recived a friend request from Jens Aanestad'])
  let response3: any = ref( ['3', 'You have lost your streak. Come back to try again'])
  notifMap.value.set(notifId.value,response.value)
  notifId.value++
  notifMap.value.set(notifId.value,response2.value)
  notifId.value++
  notifMap.value.set(notifId.value,response3.value)
  notifId.value++

  counter.value = notifMap.value.size
}
function toBadges(){

}

function getPath(id : string){
  if(id === '1'){
    return path.value = '/profile'
  }
  if(id === '2'){
    return path.value = '/friends'
  }
  if(id === '3'){
    return path.value = '/roadmap'
  }

  return '#';
}

function updateNotification(){
  //Axios get request to the getFunction
}

function removeNotification() {

}


function toHome() {
    return '/'
}

function toBudget() {
    return '/budget-overview'
}

function toSavingGoals() {
    return '/roadmap'
}

function toLeaderboard() {
    return '/leaderboard'
}

function toNews() {
    return '/news'
}

function toStore() {
    return '/shop'
}

function toSetting() {
    return '/settings/profile'
}

function toFeedback() {
    return '/feedback'
}

function toFriends() {
    return '/friends'
}

function toUserProfile() {
    return '/profile'
}

function toLogout() {
    userStore.clearUserInfo();
    router.push('login')
}
onMounted(() => {
  getNotification()
})

</script>
<style scoped>
.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem 0.3rem;
    font-size: 1.7rem;
}

.nav-item:hover {
    background-color: #01476b;
  border-radius: 1rem;
}

.not-item:hover {
  background-color: #f3f3f3;
}

.nav-item .dropdown {
    display: flex;
    justify-content: center;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;

}

.dropdown-item {
    width: 100%;
    display: flex;
    justify-content: left;
}

.dropdown-item:hover {
  width: 100%;
}

.dropdown-menu {
  padding: 5px;
  right: -0.5rem;
}

.dropdown-menu[data-bs-popper] {
    left: auto;
}

.dropdown-username-link {
    font-size: 1.7rem;
    display: flex;
    justify-self: center;
}

.dropdown-username-link:hover {
    background-color: #f3f3f3;
}

.dropdown-item img {
  height: 35px;
  width: 35px;
  margin-right: 5px;
}

#navBar {
    background-color: #003A58;
}

.notification-icon {
  height: 35px;
  width: 35px;
}

.nav-item a {
  font-size: 19px;
}

.navbar {
    display: flex;
    align-items: center;
}

.container-fluid {
    font-size: 1.7rem;
}

#logo {
    font-size: 2.5rem;
    height: 100%;
}

.nav-link img {
    margin-right: 5px;
  height: 35px;
  width: 35px;
}

#logoImg {
    margin-right: 0.3rem;
    width: 75px;
    height: auto;
    aspect-ratio: 1.3/1;
}

.notification.hidden-arrow::after{
  display: none;
}


</style>