<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <router-link to="/" class="navbar-item" exact v-if="!inCall">
        <strong>Seepur</strong>
      </router-link>
      <!-- <a class="navbar-item" href="/">
      </a>-->
      <a
        id="menu-button"
        role="button"
        class="navbar-burger burger"
        @click="showMenu=!showMenu"
        aria-label="menu"
        aria-expanded="false"
        data-target="navbarBasicExample"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="nav-menu" :class="['navbar-menu', {'is-active':showMenu}]">
      <div class="navbar-start">
        <!-- Normal Nav  -->
        <router-link active-class="is-active" to="/" class="navbar-item" exact v-if="!inCall">Home</router-link>
        <router-link
          active-class="is-active"
          to="/about"
          class="navbar-item"
          exact
          v-if="!inCall"
        >About</router-link>
        <!-- In call Nav -->
        <div class="navbar-item" v-if="inCall">
          <div class="field is-grouped">
            <p class="control">
              <router-link
                active-class="is-active"
                to="/"
                class="button is-danger"
                exact
                replace
                v-if="inCall"
              >
                <i class="fa fa-fw fa-times-circle-o"></i> End Call
              </router-link>
            </p>
            <p class="control">
              <router-link
                :to="{path:'..'}"
                class="button is-info"
                append
                replace
                v-if="inCall && $route.name==='book'"
              >
                <i class="fa fa-fw fa-arrow-circle-o-left"></i> Back
              </router-link>
            </p>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item has-dropdown is-hoverable is-dark" v-if="!inCall">
          <a class="navbar-link">{{user.name}}</a>

          <div class="navbar-dropdown">
            <router-link active-class="is-active" to="/settings" class="navbar-item" exact>Settings</router-link>
            <a class="navbar-item" href="/logout">Logout</a>
            <hr class="navbar-divider" v-if="user.is_admin" />
            <a class="navbar-item" href="/admin/" v-if="user.is_admin">Admin Settigns</a>
          </div>
        </div>
        <div class="navbar-item" v-if="inCall">
          <p class="control">
            <button class="button" @click="changeHost()">
              <i class="fa fa-fw fa-refresh"></i> Change Host
            </button>
          </p>
        </div>
        <div v-if="inCall" class="navbar-item">Current Host: {{host.name}}</div>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      showMenu: false
    };
  },
  computed: {
    host() {
      if (this.inCall) {
        if (this.callManager.isHost) return this.user;
        return this.callManager.peer;
      }
      return null;
    },
    ...mapGetters(["user", "inCall", "callManager"])
  },
  methods: {
    changeHost() {
      this.callManager.changeHost();
    },
    ...mapActions([])
  }
};
</script>

