@attribute [Route(RouteConstance.Category)]

@using CMSMicroservice.Protobuf.Protos.Category
@using BackOffice.Common.BaseComponents
@using BackOffice.Pages.AutoComplete
@using DataModel = CMSMicroservice.Protobuf.Protos.Category.GetAllCategoryByFilterResponseModel

<BasePageComponent @ref="_basePage" OnClearFilterClick="OnFilterCleared" OnSubmitClick="OnFilterSubmit">
    <Filters>
        <MudItem xs="12" sm="6" md="3">
            <MudTextField T="string" Clearable="true" Label="عنوان" @bind-Value="@_request.Filter.Title" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <CategoryAutoComplete Value="_parentFilterId"
                                  ValueChanged="OnParentFilterChanged"
                                  Label="فیلتر بر اساس دسته‌بندی والد" />
        </MudItem>
    </Filters>
    <Content>
        <MudGrid>
            <MudItem xs="12" md="3">
                <MudPaper Class="pa-2" Style="height:calc(100vh - 240px); overflow:auto;">
                    <MudText Typo="Typo.subtitle2" Class="mb-2">درخت دسته‌بندی‌ها</MudText>
                    <MudList T="string" Dense="true">
                        <MudListItem T="string"
                                     OnClick="@(() => OnTreeNodeSelected(null))"
                                     Selected="@(_parentFilterId == null)"
                                    >
                            <MudText Typo="Typo.body2">همه دسته‌بندی‌ها</MudText>
                        </MudListItem>
                        @foreach (var node in _treeNodes)
                        {
                            <MudListItem T="string"
                                         OnClick="@(() => OnTreeNodeSelected(node.Id))"
                                         Selected="@(_parentFilterId == node.Id)"
                                        >
                                <MudStack Row="true" AlignItems="AlignItems.Center">
                                    <div style="width:@(node.Level * 16)px;"></div>
                                    <MudText Typo="Typo.body2">@node.Title</MudText>
                                </MudStack>
                            </MudListItem>
                        }
                    </MudList>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" md="9">
                <MudDataGrid T="DataModel"
                             ServerData="@(new Func<GridState<DataModel>, Task<GridData<DataModel>>>(ServerReload))"
                             Hover="true"
                             @ref="_gridData"
                             Height="calc(100vh - 240px)">
                    <ColGroup>
                        <col />
                        <col />
                        <col />
                        <col />
                        <col />
                        <col />
                        <col style="width: 80px;" />
                    </ColGroup>
                    <ToolBarContent>
                        <MudText>مدیریت دسته‌بندی‌ها</MudText>
                        <MudSpacer />
                        <MudStack Spacing="2" Row="true" Justify="Justify.Center" AlignItems="AlignItems.Center">
                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       Size="Size.Large"
                                       ButtonType="ButtonType.Button"
                                       OnClick="CreateNew"
                                      >
                                افزودن
                            </MudButton>
                        </MudStack>
                    </ToolBarContent>
                    <Columns>
                        <PropertyColumn Property="x => x.Id" Title="شناسه" />
                        <PropertyColumn Property="x => x.Name" Title="نام لاتین" />
                        <PropertyColumn Property="x => x.Title" Title="عنوان" />
                        <TemplateColumn Title="دسته‌بندی والد">
                            <CellTemplate>
                                @{
                                    var parentTitle = "-";
                                    if (context.Item.ParentId.HasValue &&
                                        context.Item.ParentId.Value > 0 &&
                                        _parentTitles.TryGetValue(context.Item.ParentId.Value, out var value))
                                    {
                                        parentTitle = value;
                                    }
                                }
                                <MudText Typo="Typo.body2">@parentTitle</MudText>
                            </CellTemplate>
                        </TemplateColumn>
                        <PropertyColumn Property="x => x.SortOrder" Title="ترتیب" />
                        <PropertyColumn Property="x => x.ProductCount" Title="تعداد محصولات" />
                        <TemplateColumn Title="فعال؟">
                            <CellTemplate>
                                <MudChip Color="@(context.Item.IsActive ? Color.Success : Color.Error)"
                                         Variant="Variant.Filled"
                                         Size="Size.Small">
                                    @(context.Item.IsActive ? "فعال" : "غیرفعال")
                                </MudChip>
                            </CellTemplate>
                        </TemplateColumn>
                        <TemplateColumn StickyLeft="true" Title="عملیات" CellStyle="text-wrap: nowrap;" HeaderStyle="text-wrap: nowrap;">
                            <CellTemplate>
                                <MudStack Row="true" AlignItems="AlignItems.Center">
                                    <MudTooltip Text="ویرایش">
                                        <MudIconButton Icon="@Icons.Material.Filled.EditNote"
                                                       Size="Size.Small"
                                                       ButtonType="ButtonType.Button"
                                                       OnClick="@(() => Update(context.Item))"
                                                       />
                                    </MudTooltip>

                                    <MudTooltip Text="حذف">
                                        <MudIconButton Icon="@Icons.Material.Filled.DeleteOutline"
                                                       Size="Size.Small"
                                                       ButtonType="ButtonType.Button"
                                                       Disabled="@HasChildren(context.Item.Id)"
                                                       OnClick="@(() => OnDelete(context.Item))"
                                                       />
                                    </MudTooltip>

                                    <MudTooltip Text="مدیریت محصولات این دسته (درگ و دراپ)">
                                        <MudIconButton Icon="@Icons.Material.Filled.ShoppingCart"
                                                       Size="Size.Small"
                                                       ButtonType="ButtonType.Button"
                                                       OnClick="@(() => OpenCategoryProducts(context.Item))"
                                                       />
                                    </MudTooltip>

                                    <MudTooltip Text="افزودن زیردسته">
                                        <MudIconButton Icon="@Icons.Material.Filled.CreateNewFolder"
                                                       Size="Size.Small"
                                                       Color="Color.Primary"
                                                       ButtonType="ButtonType.Button"
                                                       OnClick="@(() => CreateSubcategory(context.Item))"
                                                       />
                                    </MudTooltip>
                                </MudStack>
                            </CellTemplate>
                        </TemplateColumn>
                    </Columns>
            <NoRecordsContent>
                <MudAlert Severity="Severity.Info" Dense="true" Variant="Variant.Text" Class="my-4">موردی یافت نشد.</MudAlert>
            </NoRecordsContent>
                    <PagerContent>
                        <MudDataGridPager T="DataModel"
                                          PageSizeOptions="@(new int[] { 20, 50, 100 })"
                                          InfoFormat="سطر {first_item} تا {last_item} از {all_items}"
                                          RowsPerPageString="تعداد در صفحه" />
                    </PagerContent>
                </MudDataGrid>
            </MudItem>
        </MudGrid>
    </Content>
</BasePageComponent>
