<template>
  <div class="menu">
    <b-navbar toggleable="md" type="dark" variant="info">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

      <b-navbar-brand :to="{ name: 'index' }">
        DNA analyser
      </b-navbar-brand>

      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <b-nav-item-dropdown text="Sequences">
            <b-dropdown-item :to="{ name: 'sequence.tools' }">
              My sequences
            </b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown text="Analyses">
            <!--
                        <b-dropdown-item :to="{ name: 'analyse.cruciform' }">
                            Palindromes
                        </b-dropdown-item>
                        -->
            <b-dropdown-item :to="{ name: 'analyse.quadruplex' }" v-if="config.analysis.g4hunter">
              G4 hunter
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'results.quadruplex' }" v-if="config.analysis.g4hunter">
              Stored results (G4Hunter)
            </b-dropdown-item>
            <!--
                        <div class="dropdown-divider"></div>
                        <b-dropdown-item :to="{ name: 'analyse.p53predictor' }">
                            p53 predictor
                        </b-dropdown-item>
                        <b-dropdown-item :to="{ name: 'results.p53predictor' }">
                            Stored results
                        </b-dropdown-item>
                        -->
            <div class="dropdown-divider" v-if="config.analysis.g4killer"></div>
            <b-dropdown-item :to="{ name: 'analyse.g4killer' }" v-if="config.analysis.g4killer">
              G4 killer
            </b-dropdown-item>

            <div class="dropdown-divider" v-if="config.analysis.p53predictor"></div>
            <b-dropdown-item :to="{ name: 'tools.p53predictor' }" v-if="config.analysis.p53predictor">
              P53 predictor
            </b-dropdown-item>

            <div class="dropdown-divider" v-if="config.analysis.rloopr"></div>

            <b-dropdown-item :to="{ name: 'analyse.rloopr' }" v-if="config.analysis.rloopr">
              R-loop tracker
            </b-dropdown-item>

            <b-dropdown-item :to="{ name: 'results.rloopr' }" v-if="config.analysis.rloopr">
              Stored results (R-loop tracker)
            </b-dropdown-item>
            <div class="dropdown-divider" v-if="config.analysis.g4killer"></div>
            <b-dropdown-item :to="{ name: 'analyse.zdna' }" v-if="config.analysis.zdna">
              Z-DNA
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'results.zdna' }" v-if="config.analysis.zdna">
              Stored results (Z-DNA)
            </b-dropdown-item>
            <div class="dropdown-divider" v-if="config.analysis.g4killer"></div>
            <b-dropdown-item :to="{ name: 'analyse.cpg' }" v-if="config.analysis.cpg">
              CpG
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'results.cpg' }" v-if="config.analysis.cpg">
              Stored results (CpG)
            </b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown text="Help">
            <b-dropdown-item :to="{ name: 'help.import' }">
              Import
            </b-dropdown-item>
            <!--
                        <b-dropdown-item :to="{ name: 'help.cruciform' }">
                            Cruciform
                        </b-dropdown-item>
                        -->
            <b-dropdown-item :to="{ name: 'help.quadruplex' }" v-if="config.analysis.g4hunter">
              G4 hunter
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.g4killer' }" v-if="config.analysis.g4killer">
              G4 Killer
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.p53' }" v-if="config.analysis.p53predictor">
              P53 predictor
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.rloopr' }" v-if="config.analysis.rloopr">
              R-loop tracker
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.zdna' }" v-if="config.analysis.zdna">
              Z-DNA tracker
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.cpg' }" v-if="config.analysis.cpg">
              CpX tracker
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.faq' }">
              FAQ
            </b-dropdown-item>
            <div class="dropdown-divider"></div>
            <b-dropdown-item :to="{ name: 'help.about' }">
              About
            </b-dropdown-item>
            <b-dropdown-item href="/adoc/index.html">
              Documentation
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'help.status' }">
              Status
            </b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item href="http://palindromes.ibp.cz" target="__blank" rel="noopener noreferrer">
            Palindrome analyser
          </b-nav-item>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item-dropdown text="Users" right v-if="!user">
            <b-dropdown-item :to="{ name: 'login' }">
              Login
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'register' }">
              Register
            </b-dropdown-item>
            <b-dropdown-item :to="{ name: 'reset-password' }">
              Reset password
            </b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown :text="user.user" v-if="user">
            <b-dropdown-item :to="{ name: 'change-password' }">
              Change password
            </b-dropdown-item>
            <b-dropdown-item @click="logout()">
              Logout
            </b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
export default {
  inject: ['UserAuth', 'config'],
  data: function() {
    return {}
  },
  mounted: function() {},
  methods: {
    update: function() {},
    logout: function() {
      this.UserAuth.logout()
      this.$router.push({ name: 'index' })
    },
  },
  computed: {
    user() {
      if (this.$store.getters.isGuest) {
        return null
      } else {
        return this.$store.state.user
      }
    },
  },
}
</script>

<style>
.menu {
  padding-bottom: 20px;
}
</style>