<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"
        ><img :src="profilePictue"
      /></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,
    };
  },
  mounted() {
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getProfile();
    }
  },
  methods: {
       goTo() {
      this.$router.push("/profile");
    },
       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>
