@if (this.allComments != null && this.inputModel != null)
{
    <div class="tab-pane fade"
         id="contact"
         role="tabpanel"
         aria-labelledby="contact-tab">
        <div class="row">
            <div class="col-lg-6">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <select class="form-control" @bind="this.sorting">
                    <option value="Newest">Newest</option>
                    <option value="Oldest">Oldest</option>
                </select>
                <br />
                <CommentsList AllComments="@this.allComments"
                              OnReply="this.ReplyClickHandler"
                              OnDelete="this.DeleteClickHandler"
                              Collapses="this.collapses"
                              TotalPagesQuantity="this.totalPagesQuantity"
                              Sorting="@this.sorting">
                </CommentsList>
            </div>
            <div class="col-lg-6">
                <div class="review_box">
                    <h4>Post a comment</h4>
                    <EditForm Model="@this.inputModel" OnValidSubmit="@this.CreateComment" class="row contact_form">
                        <DataAnnotationsValidator />
                        <div class="col-md-12">
                            <div class="form-group">
                                <InputText id="fullName" @bind-Value="this.inputModel.FullName" type="text" class="form-control" placeholder="Your Name" />
                                <ValidationMessage For="@(() => this.inputModel.FullName)" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <InputText id="email" @bind-Value="this.inputModel.Email" type="email" class="form-control" placeholder="Email Address" />
                                <ValidationMessage For="@(() => this.inputModel.Email)" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <InputText id="phoneNumber" @bind-Value="this.inputModel.PhoneNumber" type="text" class="form-control" placeholder="Phone Number" />
                                <ValidationMessage For="@(() => this.inputModel.PhoneNumber)" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <InputTextArea id="content" @bind-Value="this.inputModel.Content" class="form-control" rows="8" placeholder="Message" />
                                <ValidationMessage For="@(() => this.inputModel.Content)" />
                            </div>
                        </div>
                        <div class="col-md-12 text-right">
                            @if (this.inputModel.ParentId == null)
                            {
                                <button type="submit" class="btn submit_btn">
                                    Submit Now
                                </button>
                            }
                            else
                            {
                                <button type="submit" class="btn btn-info">
                                    Reply Now
                                </button>
                            }
                        </div>
                    </EditForm>
                </div>
            </div>
        </div>
    </div>
}

@code {
    private AddCommentInputModel inputModel = new AddCommentInputModel();
    private ICollection<CommentViewModel> allComments;
    private Dictionary<string, bool> collapses = new Dictionary<string, bool>();
    private int totalPagesQuantity = 0;
    private string sorting = "Newest";

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

    private async Task CreateComment()
    {
        await this.CommentService.AddComment(this.inputModel);
        this.inputModel.Content = string.Empty;
        this.inputModel.ParentId = null;
        this.sorting = "Newest";
        allComments = await this.CommentService.GetAllComments(this.ProductId);

        totalPagesQuantity = this.CalculateTotalPages();
        collapses = new Dictionary<string, bool>();
        foreach (var comment in this.allComments)
        {
            collapses.Add(comment.Id, false);
        }
    }

    private void ReplyClickHandler(string parentId)
    {
        inputModel.ParentId = parentId;
    }

    private async Task DeleteClickHandler(string id)
    {
        await this.CommentService.DeleteComment(id);
        this.collapses = new Dictionary<string, bool>();
        await this.OnInitializedAsync();
    }

    private int CalculateTotalPages()
    {
        return Math.Max(1, (int)Math.Ceiling(
            this.allComments
            .Where(x => x.ParentId == null)
            .Count() /
            (decimal)GlobalConstants.ProductCommentsOnPage));
    }

    protected override async Task OnInitializedAsync()
    {
        var username = this.HttpContextAccessor.HttpContext.User.Identity.Name;
        inputModel = await this.CommentService.ExtractCommentInformation(username, this.ProductId, null);
        allComments = await this.CommentService.GetAllComments(this.ProductId);

        totalPagesQuantity = this.CalculateTotalPages();
        foreach (var comment in this.allComments)
        {
            collapses.Add(comment.Id, false);
        }
    }
}