@page "/sumuppayment/{checkoutId}"
@using AyCode.Services.Loggers
@using System.Text.Json.Serialization
@using TIAMWebApp.Shared.Application.Services
@using TIAMWebApp.Shared.Application.Utility
@inject IEnumerable<IAcLogWriterClientBase> LogWriters
@inject NavigationManager navigationManager
@inject SumupService _sumupService


@inject IJSRuntime JSRuntime


<PageTitle>Sumup Payment</PageTitle>
<div class="text-center m-5">
    <h1>SUMUP safe payment</h1>
    <h2 style="font-size:small">Pay your transfer here</h2>
</div>


<p hidden=@(!isSumupHidden)>@resultMessage</p>

<div id="sumup-card" hidden=@isSumupHidden></div>


@code {
    [Parameter]
    public string checkoutId { get; set; } = "";
    private LoggerClient<SumupPayment> _logger;
    private DotNetObjectReference<SumupPayment> _objectReference;
    private string resultMessage = "";
    private bool isSumupHidden = false;

    private void Toggle()
    {
        isSumupHidden = !isSumupHidden;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _logger = new LoggerClient<SumupPayment>(LogWriters.ToArray());
            _objectReference = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("loadSumUpPaymentWidget", checkoutId, _objectReference);

        }
    }

    [JSInvokable]
    public async Task HandleSumUpResponse(string type, object body)
    {
        // Handle the response here
        JSPaymentResponse jsPresponse = body as JSPaymentResponse;
        _logger.Debug($"Resonse received 2!");
        _logger.Debug($"Type: {type}, Body: {body}");

        //let's check the result
        var status = await _sumupService.GetPaymentAsync(checkoutId);
        Toggle();
        if(status == "payed")
        {
            resultMessage = "Thank you, payment successful";
            StateHasChanged();
        }
        else
        {
            resultMessage = $"Ooops something is not ok!";
            StateHasChanged();
        }       
    }

    public void Dispose()
    {
        _objectReference?.Dispose();
    }

    public class JSPaymentResponse
    {
        [JsonPropertyName("amount")]
        public int Amount { get; set; }

        [JsonPropertyName("checkout_reference")]        
        public string CheckoutReference { get; set; }

        [JsonPropertyName("currency")]
        public string Currency { get; set; }

        [JsonPropertyName("description")]
        public string Description { get; set; }

        [JsonPropertyName("id")]
        public Guid Id { get; set; }

        [JsonPropertyName("merchant_code")]
        public string MerchantCode { get; set; }

        [JsonPropertyName("merchant_name")]
        public string MerchantName { get; set; }

        [JsonPropertyName("status")]
        public string Status { get; set; }

        [JsonPropertyName("transaction_code")]
        public string TransactionCode { get; set; }

        [JsonPropertyName("transaction_id")]
        public string TransactionId { get; set; }
    }
}

<script>
    window.loadSumUpPaymentWidget = function (checkoutId, dotNetObjectRef) {
        const script = document.createElement('script');
        script.src = 'https://gateway.sumup.com/gateway/ecom/card/v2/sdk.js';
        script.onload = () => {
            SumUpCard.mount({
                id: 'sumup-card',
                checkoutId: checkoutId,
                onResponse: function (type, body) {
                    console.log('Reponse received');
                    console.log('Type', type);
                    console.log('Body', body);
                    dotNetObjectRef.invokeMethodAsync('HandleSumUpResponse', type, body);
                }
            });
        };
        document.head.appendChild(script);
    };
</script>