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

<template>
  <v-container :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
          hide-slider
        >
          <v-tab>
            <v-icon class="tabbar-tabicon">desktop_windows</v-icon>{{ $t('ui') }}
          </v-tab>
        </v-tabs>
      </v-card>
      <v-tabs-items v-model="tab">
        <v-tab-item>
          <v-layout wrap>
            <v-flex xs12 md6>
              <div :class="{ 'mr-3': $vuetify.breakpoint.mdAndUp }">
                <v-subheader>{{ $t('general') }}</v-subheader>
                <v-card>
                  <v-card-text>
                    <v-select
                      style="max-width: 240px"
                      class="ma-3"
                      :value="store.locale"
                      @input="save('locale', $event)"
                      :items="langChoices"
                      :label="$t('language')"
                      prepend-icon="language"
                      :menu-props="{ offsetY: '' }"
                      hide-details
                    ></v-select>
                  </v-card-text>
                </v-card>
              </div>
            </v-flex>
            <v-flex xs12 md6>
              <div :class="{ 'ml-3': $vuetify.breakpoint.mdAndUp }">
                <v-subheader>{{ $t('appearance') }}</v-subheader>
                <v-card>
                  <v-card-text>
                    <v-switch
                      class="mx-3 my-3"
                      :input-value="store.dark"
                      @change="save('dark', $event)"
                      :label="$t('darkTheme')" color="primary"
                      prepend-icon="style"
                      hide-details
                    ></v-switch>
                    <v-switch
                      class="mx-3 my-4"
                      :input-value="store.coloredTabs"
                      @change="save('coloredTabs', $event)"
                      :label="$t('coloredTabs')"
                      color="primary"
                      prepend-icon="format_color_fill"
                      hide-details
                    ></v-switch>
                    <v-switch
                      class="mx-3 my-4 hidden-md-and-down"
                      :input-value="store.clipped"
                      @change="save('clipped', $event)"
                      :label="$t('clipped')"
                      color="primary"
                      prepend-icon="view_quilt"
                      hide-details
                    ></v-switch>
                    <v-switch
                      class="mx-3 my-4 hidden-md-and-down"
                      :input-value="store.mini"
                      @change="save('mini', $event)"
                      :label="$t('mini')"
                      color="primary"
                      prepend-icon="view_list"
                      hide-details
                    ></v-switch>
                    <v-switch
                      class="mx-3 my-3"
                      :input-value="store.noAnimations"
                      @change="save('noAnimations', $event)"
                      :label="$t('noAnimations')"
                      color="primary"
                      prepend-icon="visibility_off"
                      hide-details
                    ></v-switch>
                  </v-card-text>
                </v-card>
              </div>
            </v-flex>
          </v-layout>
        </v-tab-item>
        <v-tab-item>
          <v-subheader>{{ $t('general') }}</v-subheader>
          <v-card>
            <v-card-text>
              TODO
            </v-card-text>
          </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>
</style>
