<template>
  <ion-content padding>
  	<h1>Modal</h1>
  	<p>A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases. <a href="https://ionicframework.com/docs/api/modal">See full documentation.</a></p>
    <h1>Demo</h1>
    <ion-button @click="openCreditChargeModal">Open Credit Charge Modal</ion-button>
  </ion-content>
</template>

<script>
import RecoCreditChargeModal from '@/components/complex/RecoCreditChargeModal.vue'

export default {
  data() {
    return {
      creditChargeModal: null,
    };
  },
  methods: {
    openCreditChargeModal() {
      let comp = this;
      return this.$ionic.modalController
        .create({
          component: RecoCreditChargeModal,
          componentProps: {
            propsData: {
                template: {
                    agent: {avatar: "https://firebasestorage.googleapis.com/v0/b/recoma…=media&token=11b4c09d-9c6a-41f1-aafc-f37ebcfcdde8", nickname: "actiwaysteam", uid: null},
                    amount: 10,
                    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
                    in_app_id: "forum_A",
                    is_debit_transaction: true,
                    paid_on_monthly_basis: true,
                    subject: "Forum - up to 100 users"
                }
            },
            methods: {
              backButtonClicked() {
                comp.creditChargeModal.dismiss();
              },
              cancelCreditCharge() {
                  comp.creditChargeModal.dismiss();
                  console.log('Credit charge canceled.');
              },
              confirmCreditCharge() {
                  comp.creditChargeModal.dismiss();
                  console.log('Credit charge confirmed.');
              }
            }
          },
        })
        .then(m => {
          this.creditChargeModal = m;
          this.creditChargeModal.present();
        })
    },
  },
}
</script>