<i18n>
{
  "en": {
    "darkTheme": "Dark Theme",
    "coloredTabs": "Colored tabpanels",
    "clipped": "Show menu under the top bar",
    "mini": "Show icons in collapsed menu",
    "language": "Language",
    "general": "General",
    "generalSettings": "General settings",
    "appearance": "Appearance",
    "noAnimations": "Disable animations"
  },
  "de": {
    "darkTheme": "Dunkles Design",
    "coloredTabs": "Tab-Panels einfärben",
    "clipped": "Menü an die Hauptleiste andocken",
    "mini": "Symbole im eingeklappten Menü anzeigen",
    "language": "Sprache",
    "general": "Allgemein",
    "generalSettings": "Allgemeine Einstellungen",
    "appearance": "Aussehen",
    "noAnimations": "Animationen ausschalten"
  }
}
</i18n>

<template>
  <v-container fill-height :key="key">
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
      <v-card class="tabbar-card">
        <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
          v-model="tab"
          centered
          grow
        >
          <v-tab>
            <v-icon class="tabbar-tabicon">settings_applications</v-icon>{{ $t('general') }}
          </v-tab>
          <v-tab>
            <v-icon class="tabbar-tabicon">color_lens</v-icon>{{ $t('appearance') }}
          </v-tab>
        </v-tabs>
      </v-card>
      <v-tabs-items v-model="tab">
        <v-tab-item>
          <v-subheader>{{ $t('generalSettings') }}</v-subheader>
            <v-card>
              <div class="element-container">
                <v-select :value="store.locale" @input="save('locale', $event)" :items="langChoices" :label="$t('language')" prepend-icon="language" :menu-props="{ offsetY: '' }"></v-select>
              </div>
            </v-card>
        </v-tab-item>
        <v-tab-item>
          <v-subheader>{{ $t('generalSettings') }}</v-subheader>
            <v-card>
              <div class="element-container">
                <v-switch :input-value="store.dark" @change="save('dark', $event)" :label="$t('darkTheme')" color="primary" prepend-icon="style"></v-switch>
                <v-switch :input-value="store.coloredTabs" @change="save('coloredTabs', $event)" :label="$t('coloredTabs')" color="primary" prepend-icon="format_color_fill"></v-switch>
                <v-switch :input-value="store.clipped" @change="save('clipped', $event)" :label="$t('clipped')" color="primary" class="hidden-md-and-down" prepend-icon="view_quilt"></v-switch>
                <v-switch :input-value="store.mini" @change="save('mini', $event)" :label="$t('mini')" color="primary" class="hidden-md-and-down" prepend-icon="view_list"></v-switch>
                <v-switch :input-value="store.noAnimations" @change="save('noAnimations', $event)" :label="$t('noAnimations')" color="primary" prepend-icon="visibility_off"></v-switch>
              </div>
            </v-card>
        </v-tab-item>
      </v-tabs-items>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'SettingsPage',
  data () {
    return {
      langChoices: [ { text: 'Deutsch', value: 'de' }, { text: 'English', value: 'en' } ],
      tab: 0,
      key: true
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    store () { return this.$store.state.settings }
  },
  methods: {
    save (name, value) {
      if (name === 'noAnimations') setTimeout(() => { this.key = !this.key }, 0)
      this.$store.commit('saveSetting', { name: name, value: value })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.element-container {
  padding: 26px;
}
</style>
