Vue.component('payment-methods', {
  props: ['transaction'],
  inject: ['_f','_get','validate','base_uri','session_path','handleError'],
  data: () => ({
    force_stripe_option: false,
  }),
  computed: {
    isInWhiteLabel() {
      return localStorage.getItem('isInWhiteLabel')
    },
    whiteLabel() {
      return {
        white_label_name: localStorage.getItem('brandName'),
        white_label_color: localStorage.getItem('brandColor'),
        white_label_mode: localStorage.getItem('brandDark'),
        white_label_logo: localStorage.getItem('brandLogo')
      }
    }
  },
  mounted () {
  },
  methods: {
  },
  template:
`<v-form ref="payment_methods" class="payment-methods">
  <!-- will be removed -->
  <v-radio-group 
    class="mt-0" 
    v-if="force_stripe_option"
    v-model="transaction.service"
    :rules="[
      v=>(!!v) || $t('validation.required',{field: $t('EventPayment.paymentMethods')}),
    ]"
    hide-details="auto"
  >
    <v-radio :disabled="transaction.tickets.filter(ticket=>ticket.fields.bocmacau_exclusive=='true').length > 0" color="primary" value="stripe,visa_mastercard">
      <template v-slot:label>
        <v-row dense align="center">
          <v-col cols="auto">
            <v-card class="mr-1 my-2">
              <v-img width="60" :src="base_uri +'static/footer/payment-visa.png'" alt="payment-visa"></v-img>
            </v-card>
          </v-col>
          <v-col cols="auto">
            <v-card class="mr-1 my-2">
              <v-img width="60" :src="base_uri +'static/footer/payment-mastercard.png'" alt="payment-mastercard"></v-img>
            </v-card>
          </v-col>
          <v-col cols="auto">
            <v-card class="mr-3 my-2">
              <v-img width="60" :src="base_uri +'static/footer/payment-ae.png'" alt="payment-ae"></v-img>
            </v-card>
          </v-col>
          <v-col>
            <span>Visa /Mastercard/ American Express</span>
          </v-col>
        </v-row>
      </template>
    </v-radio>
  </v-radio-group>
  <!-- end will be removed -->
  <v-radio-group 
    v-else
    class="mt-0" 
    v-model="transaction.service"
    :rules="[
      v=>(!!v) || $t('validation.required',{field: $t('EventPayment.paymentMethods')}),
    ]"
    hide-details="auto"
  >
    <template v-if="transaction.currency.toUpperCase()=='MOP'">
      <v-radio :disabled="transaction.tickets.filter(ticket=>ticket.fields.bocmacau_exclusive=='true').length > 0" color="primary" value="cybersource">
        <template v-slot:label>
          <v-row dense align="center">
            <v-col cols="auto">
              <v-card class="mr-1 my-2">
                <v-img width="60" :src="base_uri +'static/footer/payment-visa.png'" alt="payment-visa"></v-img>
              </v-card>
            </v-col>
            <v-col cols="auto">
              <v-card class="mr-1 my-2">
                <v-img width="60" :src="base_uri +'static/footer/payment-mastercard.png'" alt="payment-mastercard"></v-img>
              </v-card>
            </v-col>
            <v-col>
              <span>Visa/Mastercard</span>
            </v-col>
          </v-row>
        </template>
      </v-radio>
      <v-radio :disabled="transaction.tickets.filter(ticket=>ticket.fields.bocmacau_exclusive=='true').length > 0" color="primary" value="unionpay" v-if="false">
        <template v-slot:label>
          <v-row dense align="center">
            <v-col cols="auto">
              <v-card class="mr-1 my-2">
                <v-img width="60" :src="base_uri +'static/footer/payment-unionpay.png'" alt="payment-unionpay"></v-img>
              </v-card>
            </v-col>
            <v-col>
              <span>UnionPay</span>
            </v-col>
          </v-row>
        </template>
      </v-radio>
    </template>
    <v-radio v-else :disabled="transaction.tickets.filter(ticket=>ticket.fields.bocmacau_exclusive=='true').length > 0" color="primary" value="stripe,visa_mastercard">
      <template v-slot:label>
        <v-row dense align="center">
          <v-col cols="auto">
            <v-card class="mr-1 my-2">
              <v-img width="60" :src="base_uri +'static/footer/payment-visa.png'" alt="payment-visa"></v-img>
            </v-card>
          </v-col>
          <v-col cols="auto">
            <v-card class="mr-1 my-2">
              <v-img width="60" :src="base_uri +'static/footer/payment-mastercard.png'" alt="payment-mastercard"></v-img>
            </v-card>
          </v-col>
          <v-col>
            <span>Visa/Mastercard</span>
          </v-col>
        </v-row>
      </template>
    </v-radio>
    <v-radio v-if="transaction.currency.toUpperCase()!='MOP'" :disabled="transaction.tickets.filter(ticket=>ticket.fields.bocmacau_exclusive=='true').length > 0" color="primary" value="stripe,ae">
      <template v-slot:label>
        <v-row dense align="center">
          <v-col cols="auto">
            <v-card class="mr-1 my-2">
              <v-img width="60" :src="base_uri +'static/footer/payment-ae.png'" alt="payment-ae"></v-img>
            </v-card>
          </v-col>
          <v-col>
            <span>American Express</span>
          </v-col>
        </v-row>
      </template>
    </v-radio>
    <v-radio v-if="transaction.tickets.filter(ticket=>ticket.fields.bocmacau_exclusive=='true').length > 0" color="primary" value="cybersource_boc">
      <template v-slot:label>
        <v-row dense align="center">
          <v-col cols="auto">
            <v-card class="mr-1 my-2">
              <v-img width="150" :src="base_uri +'static/footer/payment-boc.jpg'" alt="payment-boc"></v-img>
            </v-card>
          </v-col>
          <v-col>
            <span class="mr-1">中銀Visa信用卡專用</span><span class="caption error--text">(請確保使用中銀信用卡付款，否則交易會被取消)</span>
          </v-col>
        </v-row>
      </template>
    </v-radio>
  </v-radio-group>
</v-form>`
});