<template>
  <div class="payment">
    <stripe-checkout
      ref="checkoutRef"
      :pk="publishableKey"
      :items="items"
      :successUrl="successUrl"
      :cancelUrl="cancelUrl"
      :clientReferenceId="clientReferenceId"
      :customerEmail="email"
    >
      <template slot="checkout-button">
        <button class="button is-primary" @click="pay">
          Payer par carte bleue
        </button>
      </template>
    </stripe-checkout>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Action, Getter } from 'vuex-class'
import { StripeCheckout } from 'vue-stripe-checkout'
import IUser from '@/models/IUser'
import IPaymentIntent from '@/models/IPaymentIntent'
import IPayment from '@/models/IPayment'

@Component({
  components: {
    StripeCheckout
  }
})
export default class Payment extends Vue {
  @Getter
  public user!: IUser | null
  private publishableKey = 'pk_test_CO1FMasxNSwIX0P9FgzmDMyp'
  private successUrl = window.location.href
  private cancelUrl = window.location.href
  private items = [
    {
      plan: 'plan_GmrqYW6obrGUE6',
      quantity: 1
    }
  ]
  private checkoutRef: any = null

  public async mounted() {
    this.checkoutRef = this.$refs.checkoutRef
  }

  private async pay() {
    this.checkoutRef.redirectToCheckout()
  }

  private get clientReferenceId() {
    return this.user?.userId ?? ''
  }

  private get email() {
    return this.user?.email ?? ''
  }
}
</script>
