<template>
  <header class="site-header">
    <nav class="navbar navbar-fixed-top">
      <!-- LEFT -->
      <ul class="nav navbar-nav navbar-left">
        <!-- Desktop Menu button -->
        <li v-if="desktop" class="desktop-menu-toggle hidden-mobile">
          <a href="#" data-toggle="desktop-menu" title="Desktop menu">
            <div class="hidden-closed">Close</div>
            <div class="hidden-opened"></div>
          </a>
        </li>
        <!-- Logo -->
        <li>
          <a class="horizontal-logo" @click="goHome">
            <div class="logo-image" title="NTT"></div>
            <div class="logo-title"><span v-html="title"></span></div>
          </a>
        </li>
      </ul>
      <!-- CENTER -->
      <ul class="nav navbar-nav navbar-center">
        <!-- Sections -->
        <li
          v-if="hasSection"
          class="dropdown heading active"
          data-anchor-nav-dropdown=""
        >
          <a
            class="dropdown-toggle"
            :href="activeSection"
            data-toggle="dropdown"
            >{{ sections[activeSection] }}<span class="caret"></span
          ></a>

          <ul class="dropdown-menu">
            <li
              v-for="(sectionName, sectionId) in sections"
              :key="sectionId"
              :class="{ active: activeSection === sectionId }"
            >
              <a @click="changeSection(sectionId)" :href="'#' + sectionId">{{
                sectionName
              }}</a>
            </li>
          </ul>
        </li>
      </ul>
      <!-- RIGHT -->
      <ul class="nav navbar-nav navbar-right">
        <li v-if="user">
          <a
            href="#"
            data-toggle="dropdown"
            role="button"
            class="dropdown-toggle"
          >
            <span class="fa fa-user"></span>{{ user }}
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a @click="onLogout">Sign out</a></li>
          </ul>
        </li>
        <li v-if="!user">
          <button
            @click="onLogin"
            type="button"
            class="navbar-btn btn btn-primary"
          >
            Login
          </button>
        </li>
        <li role="separator" class="divider"></li>
        <!-- Settings button -->
        <li>
          <button
            type="button"
            class="navbar-btn btn hidden-xs"
            tooltip="settings"
            @click="onSettings"
          >
            <i class="fa fa-cogs"></i>
          </button>
        </li>
        <li v-if="company" role="separator" class="divider"></li>
        <li v-if="company">
          <div class="horizontal-logo">
            <span class="logo-img" :title="company">{{ company }}</span>
          </div>
        </li>

        <!-- Mobile Menu button -->
        <li v-if="mobile" role="separator" class="divider hidden-desktop"></li>
        <li
          v-if="mobile"
          class="mobile-menu-toggle hidden-desktop"
          data-toggle="mobile-menu"
          title="Mobile menu"
        >
          <button type="button" class="navbar-btn btn">
            <i class="fa fa-bars"></i>
          </button>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    user: {
      type: String,
    },
    company: {
      type: String,
      default: null,
    },
    desktop: {
      type: Boolean,
      default: true,
    },
    mobile: {
      type: Boolean,
      default: true,
    },
    sections: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeSection: "",
    };
  },
  name: "bc-navbar",
  mounted() {
    if (this.sections) {
      console.log("sections", this.sections);
      this.activeSection = Object.keys(this.sections)[0];
    }
  },
  computed: {
    hasSection() {
      return Object.keys(this.sections).length !== 0;
    },
  },
  methods: {
    onLogout() {
      console.log("User Logout");
      this.$emit("logout", this.user);
    },
    onLogin() {
      console.log("User Login");
      this.$emit("login", null);
    },
    onSettings() {
      console.log("show settings");
      this.$emit("settings", null);
    },
    changeSection(sectionId) {
      this.activeSection = sectionId;
    },
    goHome() {
      this.$emit("home", null);
    },
  },
};
</script>