<div class="modal" tabindex="-1" id="@nameof(ProductReviewModal)" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            @if (Model != null)
            {
                <div class="modal-header">
                    <h5 class="modal-title">
                        @text your review for @Product.Name
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <EditForm Model="Model" OnValidSubmit="SubmitAsync">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Title</label>
                            <InputText class="form-control" @bind-Value="Model.Title" />
                            <div class="form-text">Title of your review</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label m-0">Rating</label>
                            <div class="d-flex">
                                <i class="bi @GetRatingClass(1)" style="cursor: pointer;" @onclick="() => ChangeRating(1)"></i>
                                <i class="bi @GetRatingClass(2)" style="cursor: pointer;" @onclick="() => ChangeRating(2)"></i>
                                <i class="bi @GetRatingClass(3)" style="cursor: pointer;" @onclick="() => ChangeRating(3)"></i>
                                <i class="bi @GetRatingClass(4)" style="cursor: pointer;" @onclick="() => ChangeRating(4)"></i>
                                <i class="bi @GetRatingClass(5)" style="cursor: pointer;" @onclick="() => ChangeRating(5)"></i>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Body</label>
                            <InputTextArea class="form-control" @bind-Value="Model.Body" rows="5" />
                            <div class="form-text">Body up to 2000 characters</div>
                        </div>

                        <DataAnnotationsValidator />
                        <ValidationSummary />
                    </div>
                    <div class="modal-footer">
                        @if (Model.Id != 0)
                        {
                            if (isLoading2)
                            {
                                <LoadingButton />
                            }
                            else
                            {
                                <button type="button" class="btn btn-danger me-auto" @onclick="DeleteAsync">Delete</button>
                            }
                        }

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        @if (isLoading)
                        {
                            <LoadingButton />
                        }
                        else
                        {
                            <button type="submit" class="btn btn-primary">@text Review</button>
                        }

                    </div>
                </EditForm>
            }
        </div>
    </div>
</div>


@code {
    [Inject]
    public IJSRuntime JSRuntime { get; set; }
    [Inject]
    public HttpClient HttpClient { get; set; }

    [Parameter]
    public MProduct Product { get; set; }

    [Parameter]
    public EventCallback<MProductReview> ReviewChanged { get; set; }
    [Parameter]
    public EventCallback<MProductReview> OnDeleteReview { get; set; }

    public MProductReview Model { get; set; }

    private string text => Model.Id == 0 ? "Create" : "Update";

    private void ChangeRating(byte newRating)
    {
        Model.Rating = newRating;
    }

    private string GetRatingClass(byte rating)
    {
        if (rating <= Model.Rating)
        {
            return "bi-star-fill";
        }
        return "bi-star";
    }

    public async Task ShowModalAsync(MProductReview review)
    {
        if (Model == null)
        {
            if (review == null)
                Model = new MProductReview() { ProductId = Product.Id };
            else
                Model = review.Clone();
        }
        await JSRuntime.ShowModalStaticAsync(nameof(ProductReviewModal));
    }

    private bool isLoading;
    public async Task SubmitAsync()
    {
        isLoading = true;
        if (Model.Id == 0)
        {
            var response = await HttpClient.PostAsJsonAsync("api/products/reviews", Model);
            Model = await response.Content.ReadFromJsonAsync<MProductReview>();
        } else
        {
            await HttpClient.PutAsJsonAsync("api/products/reviews", Model);
        }
        await ReviewChanged.InvokeAsync(Model);
        isLoading = false;
        await JSRuntime.HideModalAsync(nameof(ProductReviewModal));
    }

    private bool isLoading2;
    public async Task DeleteAsync()
    {
        isLoading2 = true;
        await OnDeleteReview.InvokeAsync(Model);
        isLoading2 = false;
        await JSRuntime.HideModalAsync(nameof(ProductReviewModal));
        Model = null;
        await ReviewChanged.InvokeAsync(null);
    }
}