<template>
<nav>
    <b-navbar id="nav-red-bg" toggleable="md" type="light" variant="light">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <!--b-navbar-brand>Vezljivostni vzorci slovenskih glagolov</b-navbar-brand-->
    <b-navbar-brand class=cursorpointer v-on:click="goHome">
            VEZLJIVOSTNI VZORCI SLOVENSKIH GLAGOLOV
    </b-navbar-brand>
    <b-collapse is-nav id="nav_collapse">

    <b-navbar-nav>
        <b-nav-item-dropdown :text=corpText right>
            <b-dropdown-item v-for="option in optCorpora"
                :value="option"
                :key="option"
                v-on:click="updateCorpus(option)"
            >
                {{ option }}
            </b-dropdown-item>
        </b-nav-item-dropdown>
    </b-navbar-nav>

    <b-navbar-nav>
        <b-nav-item-dropdown :text=indexText right>
            <b-dropdown-item v-for="option in optIndexes"
                :value="option.val"
                :key="option.val"
                v-on:click="updateIndex(option)"
            >
                {{ option.key }}
            </b-dropdown-item>
        </b-nav-item-dropdown>
    </b-navbar-nav>

    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto" right v-if="this.loggedIn()">
        <b-nav-item>
            Uporabnik: {{ this.$root.store.username }} 
            <a href="#" v-on:click="logOut()">(odjava)</a>
        </b-nav-item>
    </b-navbar-nav>
    <b-navbar-nav class="ml-auto" right v-else>
        <b-nav-item>
            <router-link to="/register">
                Registracija
            </router-link>
        </b-nav-item>
        <b-nav-item>
            <router-link to="/login">
                Prijava
            </router-link>
        </b-nav-item>
    </b-navbar-nav>

    </b-collapse>
    </b-navbar>
    </nav>
</template>

<script>
export default {
    name: "Nav",
    props: ["appState"],
    data() {return {
        optCorpora: ["kres", "ssj", "gigafida"],
        optIndexes: [
            {key: "besede", val: "words"},
            {key: "udeleženske vloge", val: "functors"},
        ],
        indexText: "pregled: " + this.$root.store.selIndex.key,
        corpText: "korpus: " + this.$root.store.selCorpus,
    }},
    methods: {
        updateAll() {
            this.$root.store.indexReloader += 1
            this.$root.store.radio = "one"
            this.$router.push({
                name: "Home"
            })
        },
        setCorpText(val) {
            this.corpText = "kropus: " + val
        },
        updateCorpus(val) {
            this.setCorpText(val)
            this.$root.store.selCorpus = val
            this.updateAll()
        },
        setIndexText(val) {
            this.indexText = "index: " + val
        },
        updateIndex(val) {
            this.setIndexText(val.key)
            this.$root.store.selIndex = val
            this.updateAll()
        },
        loggedIn() {
            return (this.$root.store.token !== null)
        },
        logOut() {
            this.$root.store.token = null
            this.$root.store.username = null
            this.$router.push({
                name: "Home"
            })
        },
        goHome() {
            this.$router.replace({path: "/home"})
        }
    }
}
</script>

<style>
#nav-red-bg {
    background-color: rgb(183,21,17,0.9) !important;
}
nav a {
    color: white;
}
nav a:hover {
    color: white;
}
.cursorpointer {
    cursor: pointer;
}
</style>