<div class="comment_list">
    @foreach (var comment in this.firstComments.Skip(this.skipQuantity).Take(this.takeQuantity))
    {
        <div class="review_item">
            <div class="media">
                <div class="d-flex">
                    <img src="@comment.ImageUrl" class="commentAvatar" alt="avatar" />
                </div>
                <BSButton Color="@(this.Collapses[comment.Id] == true ? Color.Danger : Color.Success)"
                          Size=" Size.Small"
                          Class="btn-comment-circle"
                          OnClick="(() => this.CollapseComment(comment.Id))">
                    <i class="fas fa-caret-@(this.Collapses[comment.Id] == true ? "up" : "down") comment-icon-collapse"></i>
                </BSButton>
                <div class="media-body">
                    <h4>@comment.FullName</h4>
                    @if (comment.Username != null)
                    {
                        <span><a href="/Profile/@comment.Username">@@@comment.Username</a></span>
                    }
                    else
                    {
                        <span><a>Anonymous</a></span>
                    }
                    @if (comment.UpdatedOn == null)
                    {
                        <h5>@comment.CreatedOn.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt")</h5>
                    }
                    else
                    {
                        <h5>@comment.UpdatedOn?.ToLocalTime().ToString("dd-MMMM-yyyy HH:mm tt") (edited)</h5>
                    }
                    <AuthorizeView Roles="@GlobalConstants.AdministratorRole">
                        <a class="reply_btn" @onclick="@(() => this.OnReply.InvokeAsync(comment.Id))">Reply</a>
                        <a @onclick="@(() => this.OnDelete.InvokeAsync(comment.Id))">
                            Delete
                        </a>
                    </AuthorizeView>
                </div>
            </div>
            <p>@comment.Content</p>
        </div>
        <BSCollapse IsOpen="@this.Collapses[comment.Id]">
            <CommentReply AllComments="this.AllComments"
                          ReplyComments="this.AllComments
                                     .Where(x => x.ParentId == comment.Id)
                                     .ToList()"
                          Collapses="this.Collapses"
                          OnReply="@this.ReplyClickHandler"
                          OnDelete="this.DeleteClickHandler">
            </CommentReply>
        </BSCollapse>
    }
</div>

<Pagination TotaPagesQuantity="this.TotalPagesQuantity"
            CurrentPage="this.currentPage"
            Radius="GlobalConstants.PaginationRadius"
            SelectedPage="this.SelectedPage">
</Pagination>

@code {
    private int currentPage = 1;
    private int skipQuantity = 0;
    private int takeQuantity = GlobalConstants.ProductCommentsOnPage;
    private ICollection<CommentViewModel> firstComments;

    [Parameter]
    public ICollection<CommentViewModel> AllComments { get; set; }

    [Parameter]
    public EventCallback<string> OnReply { get; set; }

    [Parameter]
    public EventCallback<string> OnDelete { get; set; }

    [Parameter]
    public Dictionary<string, bool> Collapses { get; set; }

    [Parameter]
    public int TotalPagesQuantity { get; set; }

    [Parameter]
    public string Sorting { get; set; }

    private void CollapseComment(string id)
    {
        this.Collapses[id] = !this.Collapses[id];
        this.StateHasChanged();
    }

    private void ReplyClickHandler(string parentId)
    {
        this.OnReply.InvokeAsync(parentId);
    }

    private void DeleteClickHandler(string id)
    {
        this.OnDelete.InvokeAsync(id);
    }

    private void SelectedPage(int page)
    {
        this.currentPage = page;
        this.skipQuantity = (this.currentPage - 1) * GlobalConstants.ProductCommentsOnPage;
    }

    protected override void OnParametersSet()
    {
        if (this.Sorting == "Newest")
        {
            this.firstComments = this.AllComments.Where(x => x.ParentId == null).OrderByDescending(x => x.CreatedOn).ToList();
        }
        else
        {
            this.firstComments = this.AllComments.Where(x => x.ParentId == null).OrderBy(x => x.CreatedOn).ToList();
        }
    }
}