Vue.component('app-toolbar', {
  props: ['is_whitelabel','settings'],
  inject: ['updateUrlParam'],
  methods: {
    changeLang(lang){
      this.$i18n.locale = lang;
      localStorage.setItem('lang', lang, -1);
      this.updateUrlParam({name: 'lang', value: this.$i18n.locale});
    },
  },
  template: 
`<v-app-bar
  :color="is_whitelabel?(settings.white_label_color):'primary'"
  class="app-toolbar"
  fixed
  :dark="is_whitelabel?(settings.white_label_mode=='dark'):true"
  app
  height="40"
  style="z-index: 5"
  >
    <div>
      <v-app-bar
        :color="is_whitelabel?(settings.white_label_color):'primary'"
        class="app-toolbar flex sm12 lg8 offset-lg2"
        fixed
        flat
        :dark="is_whitelabel?(settings.white_label_mode=='dark'):true"
        app
        dense
        height="40"
      >
        <h1 class="headline" v-if="is_whitelabel && settings.white_label_name">{{settings.white_label_name}}</h1>
        <h1 class="v-toolbar__title ml-0" style="height: 60%;" v-else-if="is_whitelabel && settings.white_label_logo">
          <img v-bind:src="settings.white_label_logo" height="100%" :alt="settings.white_label_name" :title="settings.white_label_name">
        </h1>
        <h1 class="headline" v-else-if="is_whitelabel && settings.white_label_name">{{settings.white_label_name}}</h1>
        <h1 v-else class="v-toolbar__title ml-0" style="height: 60%;">
          <img v-bind:src="'./static/logo_white.png'" height="100%" alt="1TICKS" title="1TICKS">
        </h1>  
        <v-spacer></v-spacer>

        <!-- language -->
        <v-toolbar-items>
          <v-menu offset-y origin="center center" :nudge-bottom="1" transition="slide-y-transition" max-height="90%">
            <template v-slot:activator="{ on }">
              <v-btn text v-on="on">
                <v-icon small class="pr-1">mdi-web</v-icon>{{$t('lang_abbr.'+$i18n.locale)}}
              </v-btn>
            </template>
            <v-list class="pa-0">
              <v-list-item :input-value="lang==$i18n.locale" v-for="(lang) in ['zh_TW','zh_CN','en']" @click="changeLang(lang)" ripple="ripple" rel="noopener" :key="lang">
                <v-list-item-content>
                  <v-list-item-title :class="{'primary--text':$i18n.locale === lang}">{{ $t('lang.'+lang) }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-toolbar-items>
      </v-app-bar>
    </div>
</v-app-bar>`
});