<template>
        <v-dialog max-width="1200" width="1200" v-model="settings_dialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
        :close-on-content-click="false" transition="dialog-top-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn v-bind="attrs" v-on="on" min-width="0px" :class = "activatorClass" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp"></span><v-icon>more_vert</v-icon></v-btn>
          </template>
              <v-card>
            <v-toolbar dense dark color="primary">
              <v-toolbar-title>Meny</v-toolbar-title><v-spacer></v-spacer>
              <v-toolbar-items><v-divider vertical/>

                <v-btn
                    @click="settings_dialog=false"
                    dark
                    text
              >{{$t("close")}}
                <v-icon>close</v-icon>
              </v-btn>
            </v-toolbar-items>
            </v-toolbar>
              <v-card-text>
                <v-list subheader>
                  <v-subheader>Hjelp og informasjon</v-subheader>
                <v-btn text to="/om">Om ordbøkene<v-icon>chevron_right</v-icon></v-btn>
                </v-list>
                <v-list subheader max-width="250">

                <v-subheader>{{$t("settings.locale")}}</v-subheader>
                <v-select rounded 
                          v-model="updateLocale"
                          prepend-inner-icon="language"
                          outlined
                          :items="locales"
                          dense>
                    </v-select>
                </v-list>
              <v-divider></v-divider>
              <v-list three-line subheader>
                <v-subheader>{{$t("settings.title")}}</v-subheader>
              <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="Vis bøyningsnumre"
                hide-details
              ></v-checkbox>
              </v-list>
            </v-card-text>
             <v-card-actions><v-spacer/>
 
                       <v-btn rounded depressed @click='resetStore'>Tilbakestill</v-btn>
                      <v-btn rounded depressed @click="settings_dialog = false">{{$t("close")}}</v-btn> 
             </v-card-actions>
            

          </v-card>
          </v-dialog>
</template>

<script>

export default {
    name: "Menu",
    props: {
      activatorClass: null

    },
    data () {
        return {
            locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}],
            localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"},
            settings_dialog: false
        }
    },
    computed: {
        toggleSearchToolbar: {
            get () { return this.$store.state.showSearchToolbar}, 
            set () { this.$store.commit("toggle", "showSearchToolbar")
            }
        },
        toggleHGNO: {
            get () { return this.$store.state.showHGNO}, 
            set () { this.$store.commit("toggle", "showHGNO")
            }
        },
        toggleInflectionNo: {
            get () { return this.$store.state.showInflectionNo}, 
            set () { this.$store.commit("toggle", "showInflectionNo")
            }
        },
        updateLocale: {
            get () { return {text: this.localesMap[this.$store.state.currentLocale], value: this.$store.state.currentLocale}}, 
            set(value) {
              this.$store.commit("setLocale", {value: value, i18n: this._i18n})
              }
        }

    },
    methods: {
        resetStore: function() {
          this.$store.commit("resetStore")

        }
    }
}
</script>