@using BTCPayServer.Controllers
@model WalletPSBTViewModel
@{
    var walletId = Context.GetRouteValue("walletId").ToString();
    var cancelUrl = Model.ReturnUrl ?? Url.Action(nameof(UIWalletsController.WalletTransactions), new { walletId });
    var backUrl = Model.BackUrl != null ? $"{Model.BackUrl}?returnUrl={Model.ReturnUrl}" : null;
    Layout = "_LayoutWizard";
    ViewData.SetActivePage(WalletsNavPages.PSBT, "Decode PSBT", walletId);
}

@section Navbar {
    @if (backUrl != null)
    {
        <a href="@Url.EnsureLocal(backUrl)" id="GoBack">
            <vc:icon symbol="back" />
        </a>
    }
    <a href="@Url.EnsureLocal(cancelUrl)" id="CancelWizard" class="cancel">
        <vc:icon symbol="close" />
    </a>
}

@section PageHeadContent {
    <link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true"/>
}

@section PageFootContent {
    <script src="~/vendor/vuejs/vue.min.js" asp-append-version="true"></script>
    <script src="~/vendor/vue-qrcode/vue-qrcode.min.js" asp-append-version="true"></script>
    <script src="~/vendor/ur-registry/urlib.min.js" asp-append-version="true"></script>
    <script src="~/vendor/vue-qrcode-reader/VueQrcodeReader.umd.min.js" asp-append-version="true"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const psbtHex = @Json.Serialize(Model.PSBTHex);
            if (psbtHex) {
                const buffer = new window.URlib.Buffer.from(psbtHex, "hex");
                const cryptoPSBT = new window.URlib.CryptoPSBT(buffer);
                const encoder = cryptoPSBT.toUREncoder();
                const modes = {
                    ur: { title: "UR", fragments: encoder.encodeWhole() },
                    static: { title: "Static", fragments: [psbtHex] }
                };
                initQRShow({ title: "Scan the PSBT", modes });
            }
            initCameraScanningApp("Scan PSBT", data => {
                let hex = data;
                if (typeof(data) === "object") {
                    if (data.type === "crypto-psbt") {
                        const psbt = window.URlib.CryptoPSBT.fromCBOR(data.cbor);
                        hex = psbt.getPSBT().toString('hex');
                    } else {
                        console.error('Unexpected UR type', data.type)
                    }
                } else if (typeof(data) === 'string') {
                    hex = data;
                }
                document.getElementById("PSBT").value = hex;
                document.getElementById("Decode").click();
            }, "scanModal");
        });
    </script>
}

<header class="text-center">
    <h1>@ViewData["Title"]</h1>
    <p class="lead text-secondary mt-3 mx-md-5">You can decode a PSBT by either pasting its content, uploading the file or scanning the wallet QR code.</p>
</header>

<div class="my-5">
    @if (Model.Errors != null && Model.Errors.Count != 0)
    {
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <vc:icon symbol="close" />
            </button>
            @foreach (var error in Model.Errors)
            {
                <span>@error</span>
                <br/>
            }
        </div>
    }

    <form class="form-group" method="post" asp-action="WalletPSBT" asp-route-walletId="@walletId" enctype="multipart/form-data">
        <input type="hidden" asp-for="ReturnUrl" />
        <input type="hidden" asp-for="BackUrl" />
        <div class="form-group">
            <label asp-for="PSBT" class="form-label"></label>
            <textarea class="form-control" rows="5" asp-for="PSBT"></textarea>
            <span asp-validation-for="PSBT" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="UploadedPSBTFile" class="form-label"></label>
            <input asp-for="UploadedPSBTFile" type="file" class="form-control">
        </div>
        <div class="d-flex">
            <button type="submit" name="command" value="decode" class="btn btn-primary mt-2" id="Decode">Decode PSBT</button>
            <button type="button" id="scanqrcode" class="btn btn-secondary only-for-js ms-3 mt-2" data-bs-toggle="modal" data-bs-target="#scanModal">Scan wallet QR with camera</button>
        </div>
    </form>
</div>
<partial name="ShowQR"/>
<partial name="CameraScanner"/>