@model PaymentModel

<main id="checkout-cheating" class="shadow-lg" v-cloak v-if="display">
    <section>
        <p id="CheatSuccessMessage" class="alert alert-success text-break" v-if="successMessage" v-text="successMessage"></p>
        <p id="CheatErrorMessage" class="alert alert-danger text-break" v-if="errorMessage" v-text="errorMessage"></p>
        <form id="test-payment" :action="`/i/${invoiceId}/test-payment`" method="post" v-on:submit.prevent="handleFormSubmit($event, 'paying')" v-if="displayPayment">
            <input name="CryptoCode" type="hidden" value="@Model.CryptoCode">
            <input name="PaymentMethodId" type="hidden" :value="paymentMethodId">
            <label for="FakePayAmount" class="control-label form-label">Fake a @Model.CryptoCode payment for testing</label>
            <div class="d-flex gap-2 mb-2">
                <div class="input-group">
                    <input id="FakePayAmount" name="Amount" type="number" step="0.00000001" min="0" class="form-control" placeholder="Amount" v-model="amountRemaining" :disabled="paying || paymentMethodId === 'BTC_LightningLike'"/>
                    <div id="test-payment-crypto-code" class="input-group-addon input-group-text">@Model.CryptoCode</div>
                </div>
                <button class="btn btn-secondary flex-shrink-0 px-3 w-100px" type="submit" :disabled="paying" id="FakePay">Pay</button>
            </div>
        </form>
        <form id="mine-block" :action="`/i/${invoiceId}/mine-blocks`" method="post" class="mt-4" v-on:submit.prevent="handleFormSubmit($event, 'mining')" v-if="displayMine">
            <label for="BlockCount" class="control-label form-label">Mine to test processing and settlement</label>
            <div class="d-flex gap-2">
                <div class="input-group">
                    <input id="BlockCount" name="BlockCount" type="number" step="1" min="1" class="form-control" value="1"/>
                    <div class="input-group-addon input-group-text">blocks</div>
                </div>
                <button class="btn btn-secondary flex-shrink-0 px-3 w-100px" type="submit" :disabled="mining" id="Mine">Mine</button>
            </div>
        </form>
        <form id="expire-invoice" :action="`/i/${invoiceId}/expire`" method="post" class="mt-4" v-on:submit.prevent="handleFormSubmit($event, 'expiring')" v-if="displayExpire">
            <label for="ExpirySeconds" class="control-label form-label">Expire invoice in …</label>
            <div class="d-flex gap-2">
                <div class="input-group">
                    <input id="ExpirySeconds" name="Seconds" type="number" step="1" min="0" class="form-control" value="20" />
                    <div class="input-group-addon input-group-text">seconds</div>
                </div>
                <button class="btn btn-secondary flex-shrink-0 px-3 w-100px" type="submit" :disabled="expiring" id="Expire">Expire</button>
            </div>
        </form>
    </section>
</main>

<script>
    Vue.component('checkout-cheating', {
        el: '#checkout-cheating',
        data () {
            return {
                successMessage: null,
                errorMessage: null,
                paying: false,
                mining: false,
                expiring: false,
                amountRemaining: parseFloat(this.btcDue)
            }
        },
        props: {
            invoiceId: String,
            paymentMethodId: String,
            btcDue: Number,
            isPaid: Boolean
        },
        computed: {
            display() {
                return this.successMessage || this.errorMessage || this.displayPayment || this.displayMine || this.displayExpire;
            },
            displayPayment () {
                return !this.isPaid;
            },
            displayExpire () {
                return !this.isPaid;
            },
            displayMine () {
                return this.paymentMethodId === 'BTC';
            }
        },
        methods: {
            async handleFormSubmit (e, processing) {
                const form = e.target;
                const url = form.getAttribute('action');
                const method = form.getAttribute('method');
                const body = new FormData(form);
                const headers = { 'Accept': 'application/json' }
                
                this[processing] = true;
                this.successMessage = null;
                this.errorMessage = null;
                
                const response = await fetch(url, { method, body, headers });
                const data = await response.json();
                this.successMessage = data.successMessage;
                this.errorMessage = data.errorMessage;
                if (data.amountRemaining) this.amountRemaining = data.amountRemaining;
                this[processing] = false;
            }
        }
    })
</script>