Vue.component('app-footer', {
  props: ['is_whitelabel','settings'],
  inject: ['getUrlParam','updateUrlParam'],
  methods: {
    changeLang (lang) {
      this.$i18n.locale = lang;
      if(this.getUrlParam('lang') != lang){
        this.getUrlParam('lang', this.$i18n.locale);
      }
    },
  },
  template: 
`<v-footer height="auto" dark class="app--footer" style="margin-top: 40px;">
  <v-card
    flat
    tile
    color="transparent"
    style="width: 100%;"
    class="white--text text-center"
  >
    <v-card-text class="px-0">
      <v-row no-gutters justify="center">
        <v-col cols="12" md="10" lg="8">
          <v-row no-gutters>
            <v-col cols="12" md="6">
              <v-img v-if="is_whitelabel && settings.white_label_logo && settings.white_label_logo != 'null'" class="mx-auto" max-width="300px" :src="settings.white_label_logo" :alt="settings.white_label_name"></v-img>
              <h2 v-else-if="is_whitelabel && settings.white_label_name" class="display-2 text-xs-left">{{settings.white_label_name}}</h2>
              <v-img v-else class="ml-2" max-width="300px" :src="'./static/logo_white.png'" alt="1TICKS"></v-img>
              <h2 style="display:none;">1TICKS</h2>
            </v-col>
            <v-col cols="12" md="6">
              <!-- social medias icon -->
              <v-row v-if="!is_whitelabel">
                <v-col cols="12" class="text-left text-md-right">
                  <v-btn icon color="grey" @click="open('facebook')">
                    <v-icon color="secondary">mdi-facebook</v-icon>
                  </v-btn>
                  <v-btn icon color="grey" @click="open('instagram')">
                    <v-icon color="secondary">mdi-instagram</v-icon>
                  </v-btn>
                  <v-btn icon color="grey" @click="open('messenger')">
                    <v-icon color="secondary">mdi-messenger</v-icon>
                  </v-btn>
                  <v-btn icon color="grey" @click="open('mail')">
                    <v-icon color="secondary">mdi-envelope</v-icon>
                  </v-btn>
                </v-col>
              </v-row>
              <!-- end social media icon -->
              <!-- navigator menus -->
              <v-row dense class="text-left" v-if="!is_whitelabel">
                <v-spacer></v-spacer>
                <v-col :cols="$vuetify.breakpoint.smAndDown?'12':'auto'">
                  <a style="text-underline-position: under;" :title="$t('footer.blog')" class="subtitle-1 grey--text" href="https://1ticks.com/blog" target="_blank">{{$t('footer.blog')}}</a>
                </v-col>
                <v-col :cols="$vuetify.breakpoint.smAndDown?'12':'auto'">
                  <a style="text-underline-position: under;" :title="$t('footer.instruction')" class="subtitle-1 grey--text" href="https://1ticks.com/purchase-instruction" target="_blank">{{$t('footer.instruction')}}</a>
                </v-col>
                <v-col :cols="$vuetify.breakpoint.smAndDown?'12':'auto'">
                  <a style="text-underline-position: under;" :title="$t('footer.faq')" class="subtitle-1 grey--text" href="http://docs.1ticks.com" target="_blank">{{$t('footer.faq')}}</a>
                </v-col>
                <v-col :cols="$vuetify.breakpoint.smAndDown?'12':'auto'">
                  <a style="text-underline-position: under;" :title="$t('footer.termsOfUse')" class="subtitle-1 grey--text" href="https://1ticks.com/terms-of-use" target="_blank">{{$t('footer.termsOfUse')}}</a>
                </v-col>
                <v-col :cols="$vuetify.breakpoint.smAndDown?'12':'auto'">
                  <a style="text-underline-position: under;" :title="$t('footer.privacyPolicy')" class="subtitle-1 grey--text" href="https://1ticks.com/privacy-policy" target="_blank">{{$t('footer.privacyPolicy')}}</a>
                </v-col>
              </v-row>
              <!-- end navigator menus -->
              <!-- allow payment methods -->
              <v-row dense class="mt-2 text-left" align="center" v-if="!is_whitelabel">
                <v-spacer></v-spacer>
                <v-col class="pl-2" :cols="$vuetify.breakpoint.smAndDown?'12':'auto'">
                  <span class="subtitle-1 grey--text">{{$t('footer.paymentAccept')}}</span>
                </v-col>
                <v-img max-width="80" class="my-2 ml-2" :src="'./static/footer/payment-visa.png'" alt="payment-visa"></v-img>
                <v-img max-width="80" class="my-2 ml-2" :src="'./static/footer/payment-mastercard.png'" alt="payment-mastercard"></v-img>
                <v-img max-width="80" class="my-2 ml-2" :src="'./static/footer/payment-visa-secure.png'" alt="payment-visa-secure"></v-img>
                <v-img max-width="80" class="my-2 ml-2" :src="'./static/footer/payment-mastercard-secure.png'" alt="payment-mastercard-secure"></v-img>
                <v-img max-width="80" class="my-2 ml-2" :src="'./static/footer/payment-ae.png'" alt="payment-ae"></v-img>
              </v-row>
              <!-- end allow payment methods -->
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-text class="white--text" :class="{'pb-4':$vuetify.breakpoint.xs}">
      <div class='text-center grey--text'>
        <v-btn text class="ma-0" :ripple="false" :class="{'primary--text font-weight-bold':$i18n.locale === 'zh_TW', 'grey--text':$i18n.locale !== 'zh_TW'}" @click="changeLang('zh_TW')">{{$t('lang.zh_TW')}}</v-btn>
        <v-btn text class="ma-0" :ripple="false" :class="{'primary--text font-weight-bold':$i18n.locale === 'zh_CN', 'grey--text':$i18n.locale !== 'zh_CN'}" @click="changeLang('zh_CN')">{{$t('lang.zh_CN')}}</v-btn>
        <v-btn text class="ma-0" :ripple="false" :class="{'primary--text font-weight-bold':$i18n.locale === 'en', 'grey--text':$i18n.locale !== 'en'}" @click="changeLang('en')">{{$t('lang.en')}}</v-btn>
      </div>
      <div class='text-center pb-1 grey--text' :class="{'pb-5':$vuetify.breakpoint.xs}">
        Copyright &copy; {{ new Date().getFullYear() }} WeWon Info Tech Co. Ltd. All rights reserved.
      </div>
    </v-card-text>
  </v-card>
</v-footer>`
});