<template>
  <v-app>
    <v-app-bar
      app
      clipped-left
      color="primary"
      dark
    >
      <v-spacer />
      <v-toolbar-title>{{ $t('common.app.title') }}</v-toolbar-title>
      <v-spacer />
      <v-select
        v-model="selectedLocale"
        class="ma-0 mr-4"
        dense
        hide-details
        outlined
        :items="localeItems"
        item-text="text"
        item-value="value"
        style="max-width: 150px"
      />
    </v-app-bar>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'AppRoot',
  data() {
    return {
      selectedLocale: null
    }
  },
  computed: {
    localeItems() {
      return [
        { value: 'ko', text: this.$t('common.lang.ko') },
        { value: 'en', text: this.$t('common.lang.en') },
        { value: 'ja', text: this.$t('common.lang.ja') }
      ]
    }
  },
  watch: {
    selectedLocale(v) {
      if (!v) return
      this.$i18n.locale = v
      try { localStorage.setItem('locale', v) } catch (e) { /* ignore */ }
    }
  },
  created() {
    this.selectedLocale = this.$i18n && this.$i18n.locale ? this.$i18n.locale : 'ko'
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.noscroll {
  overflow-y: hidden;
}

.noscroll::-webkit-scrollbar {
  overflow-y: hidden;
  display: none;
}
</style>
