<template>
              <v-card>
            <v-toolbar dark color="primary">
              <v-toolbar-title>Meny</v-toolbar-title><v-spacer></v-spacer>
              <v-toolbar-items>
              <v-btn
                dark
                text
                @click="$emit('close')"
              >
                Tilbakestill
              </v-btn>
                            <v-btn
                dark
                text
                @click="$emit('close')"
              >
                Lukk
              </v-btn>
            </v-toolbar-items>
            </v-toolbar>
            <v-container fluid><v-row align="center" justify="space-between">
                <v-col><v-subheader>Visningsspråk</v-subheader>
                <v-select rounded 
                          v-value="$store.state.currentLocale"
                          @submit="changeLocale"
                          prepend-inner-icon="language"
                          outlined
                          :items="locales"
                          dense>
                    </v-select></v-col>
                </v-row><v-row align="center"><v-col>

              <v-checkbox
                v-model="toggleSearchToolbar"
                label="Vis verktøylinje for søkealternativer"
                hide-details
              ></v-checkbox>
                <v-checkbox
                v-model="toggleHGNO"
                label="Vis homografnumre"
                hide-details
              ></v-checkbox>
                <v-checkbox
                v-model="toggleInflectionNo"
                label="Bis bøyningsnumre"
                hide-details
              ></v-checkbox>
             </v-col> </v-row>
            </v-container>
          </v-card>
</template>

<script>

export default {
    name: "Menu",
    data () {
        return {
            locales: [{text: "bokmål", value: "nob"}, {text: "nynorsk", value: "nno"}, {text:"english", value: "eng"}]

        }
    },
    computed: {
        toggleSearchToolbar: {
            get () { return this.$store.state.showSearchToolbar}, 
            set () { this.$store.commit("toggleSearchToolbar")
            }
        },
        toggleHGNO: {
            get () { return this.$store.state.showHGNO}, 
            set () { this.$store.commit("toggleHGNO")
            }
        },
        toggleInflectionNo: {
            get () { return this.$store.state.showInflectionNo}, 
            set () { this.$store.commit("toggleInflectionNo")
            }
        },
    },
    methods: {
        changeLocale: function(event) {
            console.log(event)

        }
    }
}
</script>