<template>
  <nav
    class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
  >
    <div class="logo">
      <img
        class="m-1 ml-4 cursor-pointer h-12"
        src="../../assets/logo3.svg"
        alt="BoCo logo"
        @click="$router.push('/')"
      />
    </div>
    <ul class="flex">
      <li>
        <PlusIcon
          class="m-6 cursor-pointer h-7 text-primary-medium"
          alt="Legg til"
          @click="$router.push('/newItem')"
        />
      </li>
      <li>
        <ChatAlt2Icon
          class="m-6 cursor-pointer h-7 text-primary-medium"
          alt="Meldinger"
          @click="$router.push('/messages')"
        />
      </li>
      <li>
        <UserCircleIcon
          class="m-6 cursor-pointer h-7 text-primary-medium"
          alt="Profil"
          @click="loadProfile"
        />
      </li>
    </ul>
  </nav>
</template>

<script>
import { parseUserFromToken } from "@/utils/token-utils";
import { PlusIcon, ChatAlt2Icon, UserCircleIcon } from "@heroicons/vue/outline";

export default {
  name: "NavBar.vue",

  components: {
    PlusIcon,
    ChatAlt2Icon,
    UserCircleIcon,
  },

  methods: {
    async loadProfile() {
      if (this.$store.state.user.token !== null) {
        let user = parseUserFromToken(this.$store.state.user.token);
        let id = user.accountId;
        await this.$router.push("/profile/" + id);
      } else {
        await this.$router.push("/login");
      }
    },
  },
};
</script>

<style scoped></style>