<template>
    <nav class="navbar navbar-expand-sm spotLight-nav">

      <a @click="goTo" class="navbar-brand" href="javasript:void(0);"

        ><img src="../assets/images/logo.png"
      /></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarsExample03"
        aria-controls="navbarsExample03"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
        <span class="navbar-toggler-icon"></span>
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse" id="navbarsExample03">
        <!-- <ul class="navbar-nav mr-auto">
          <li class="nav-item active">

            <a class="nav-link" href="javasript:void(0);"avasript:void(0);"

          </li>
          <li class="nav-item">

            <a class="nav-link" href="javasript:void(0);"avasript:void(0);"

          </li>
          <li class="nav-item">

            <a class="nav-link" href="javasript:void(0);"avasript:void(0);"

          </li>
          <li class="nav-item">

            <a class="nav-link" href="javasript:void(0);"avasript:void(0);"

          </li>
        </ul> -->
      </div>
      <div class="">

        <a
          @click="goTo"
          href="javascript:void(0);"
          class="user-profile-photo common_color"
          v-if="usertoken"
        >
          <img :src="profilePictue"
        /></a>
        <a
          @click="goToLogin"
          href="javascript:void(0);"
          class="user-profile-photo insights-profile"
          v-if="!usertoken"
        >
          <img src="../assets/images/lock.svg"

        /></a>
        <div class="sub-menu-user" id="userprofileshow" style="display: none">
          <!-- <ul>
                <li>
                  <a href="javascript:void(0);" 
                    >Edit Profile</a
                  >
                </li>
                <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
              </ul> -->
        </div>
      </div>
    </nav>
  </template>
  
  <script>
  import $ from "jquery";
  import axios from "axios";
  export default {
    name: "Header",
    data() {
      return {

        usertoken: null,
        profilePictue: null,

        userId: null,

      };
    },
    mounted() {
      var userdata = localStorage.getItem("spotlight_usertoken");

      this.userId = localStorage.getItem("spotlight_id");

      if (userdata) {
        userdata = JSON.parse(userdata);
        this.usertoken = userdata.token;
        this.getProfile();
      }
    },
    methods: {

      goTo() {

        this.$router.push({
          name: "Profile",
          params: {
            id: this.userId,
          },
        });

      },

      goToLogin() {
        localStorage.removeItem("spotlight_usertoken");
        localStorage.removeItem("spotlight_email");

        localStorage.removeItem("spotlight_id");

        this.$router.push("/login");
      },
      getProfile() {

        axios
          .get("/profile", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            this.assignClass(response.data.data.bgColor);
            this.profilePictue = response.data.data.profilePic;

            console.log(response.data.data);
          })
          .catch((error) => console.log(error));
      },
      assignClass(bgClr) {
        var cols = document.getElementsByClassName("common_color");
        for (var i = 0; i < cols.length; i++) {
          cols[i].style.backgroundColor = bgClr;
        }
      },

    },

  };
  </script>