@using BTCPayServer.BIP78.Sender
@using BTCPayServer.Components.TruncateCenter
@using BTCPayServer.Abstractions.TagHelpers
@using BTCPayServer.Payments.Bitcoin
@model BTCPayServer.Models.InvoicingModels.CheckoutModel

<template id="@BitcoinCheckoutModelExtension.CheckoutBodyComponentName">
    @await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-bitcoin-pre-content", model = Model})
    <div class="payment-box">
        <div v-if="model.invoiceBitcoinUrlQR" class="qr-container" :data-qr-value="model.invoiceBitcoinUrlQR" :data-clipboard="model.invoiceBitcoinUrl" data-clipboard-confirm-element="#Address_@Model.PaymentMethodId [data-clipboard]">
            <div>
                <qrcode :value="model.invoiceBitcoinUrlQR" tag="div" :options="qrOptions" />
            </div>
            <img class="qr-icon" :src="model.cryptoImage" :alt="model.paymentMethodName"/>
        </div>
        <div v-if="model.address" class="input-group mt-3">
            <div class="form-floating" id="Address_@Model.PaymentMethodId">
                <vc:truncate-center text="model.address" is-vue="true" padding="15" elastic="true" classes="form-control-plaintext" />
                <label v-t="{ path: 'address', args: { paymentMethod: model.paymentMethodName }}"></label>
            </div>
        </div>
        <div v-if="lightning" class="input-group mt-3">
            <div class="form-floating" id="Lightning_@Model.PaymentMethodId">
                <vc:truncate-center text="lightning" is-vue="true" padding="15" elastic="true" classes="form-control-plaintext" />
                <label v-t="'lightning'"></label>
            </div>
        </div>
        <a v-if="model.invoiceBitcoinUrl && model.showPayInWalletButton" class="btn btn-primary rounded-pill w-100 mt-4" id="PayInWallet" target="_blank"
           :href="model.invoiceBitcoinUrl" :title="$t(hasPayjoin ? 'BIP21 payment link with PayJoin support' : 'BIP21 payment link')" v-t="'pay_in_wallet'"></a>
        @await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-bitcoin-post-content", model = Model})
    </div>
</template>

<script>
	Vue.component(@Safe.Json(BitcoinCheckoutModelExtension.CheckoutBodyComponentName), {
		props: ['model', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage', 'nfcWarningMessage'],
		template: @Safe.Json("#" + BitcoinCheckoutModelExtension.CheckoutBodyComponentName),
        components: {
            qrcode: VueQrcode
        },
        data () {
            // currentTab is needed for backwards-compatibility with old plugin versions
            return { currentTab: undefined };
        },
        computed: {
            hasPayjoin () {
                return this.model.invoiceBitcoinUrl.indexOf('@PayjoinClient.BIP21EndpointKey=') !== -1;
            },
            lightning () {
                const match = this.model.invoiceBitcoinUrl.match(/[&?]lightning=(.*)&?/i);
                return match ? match[1].toLowerCase() : null;
            }
        }
    });
</script>