@using Website.Components.Extensions
@using Microsoft.JSInterop
@typeparam TItem

<div class="modal fade" id="@ModalId" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
            </div>
            <div class="modal-body">
                @if (Item != null)
                {
                    @ChildContent
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn @BtnClass" @onclick="ConfirmAsync">@(new MarkupString(BtnText))</button>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public EventCallback<TItem> OnConfirm { get; set; }

    [Parameter]
    public string ModalId { get; set; }
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    [Parameter]
    public string BtnText { get; set; }
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string BtnClass { get; set; }

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    public TItem Item { get; private set; }

    public async Task ShowAsync(TItem item)
    {
        Item = item;
        await JSRuntime.ShowModalAsync(ModalId);
    }

    private async Task ConfirmAsync()
    {
        await OnConfirm.InvokeAsync(Item);
        await JSRuntime.HideModalAsync(ModalId);
        Item = default;
    }
}