@page "/product/categories"
@inject IDialogService DialogService
@inject NavigationManager NavigationManager
@inject IRestWrapper RestWrapper
@inject ISnackbar Snackbar
@inject IUserUtility UserUtility

@* <style>
    .mud-input-label {
        background-color: var(--mud-palette-background-grey);
    }
</style>  *@
<MudPaper class="bg-[--mud-palette-background-grey] h-screen w-full p-3 md:p-8">

    <MudStack Row="true" class="overflow-x-auto pb-3">
        <MudStack Spacing="1" class="min-w-[340px]">
            <MudStack Row="true" class="mb-5">
                <MudText Typo="Typo.h6" class="my-auto"><b>دسته های اصلی</b></MudText>
                <MudSpacer />
                <MudIconButton Icon="@Icons.Material.Filled.Add"
                               Size="@Size.Small"
                               Variant="@Variant.Outlined"
                               OnClick="()=>ViewModel.ChangeOriginalCategoryVisibility()"
                               Color="@Color.Secondary" />
            </MudStack>
            @if (ViewModel.OriginalCategoryVisibility)
            {
                <MudTextField class="-mt-2 mb-3" T="string" Label="نام دسته بندی" Variant="Variant.Text" Immediate="false" ValueChanged="name =>  ViewModel.AddFastProductCategory(name)"></MudTextField>
            }
            @foreach (var item in ViewModel.PageDto)
            {
                <MudCard class="@(item.IsSelected ? "cursor-pointer border-dashed border-2 border-blue-400 " : "cursor-pointer" )" @onclick="()=>ViewModel.SelectCategory(item)">
                    <MudCardHeader>
                        <CardHeaderContent>
                            <MudText Typo="Typo.body1">@item.Name</MudText>
                        </CardHeaderContent>
                        <CardHeaderActions>
                            <MudStack Row="true" Spacing="1">
                                <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                               Size="@Size.Small"
                                               class="mt-1"
                                               Variant="@Variant.Outlined"
                                               OnClick="async () => await ViewModel.EditProductCategoryClicked(item)"
                                               Color="@Color.Info" />

                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                               Size="@Size.Small"
                                               class="mt-1"
                                               Variant="@Variant.Outlined"
                                               OnClick="async () => await ViewModel.DeleteProductCategoryAsync(item.Id)"
                                               Color="@Color.Error" />
                            </MudStack>
                        </CardHeaderActions>
                    </MudCardHeader>
                </MudCard>
            }
        </MudStack>


        @foreach (var item in ViewModel.SelectedCategories)
        {
            <MudStack Spacing="1" class="min-w-[340px]">
                <MudStack Row="true" class="mb-5">
                    <MudText Typo="Typo.h6" class="my-auto"><b>@item.Name</b></MudText>
                    <MudSpacer />
                    <MudIconButton Icon="@Icons.Material.Filled.Add"
                                   Size="@Size.Small"
                                   Variant="@Variant.Outlined"
                                   OnClick="()=>item.AddNewCatVisibility = !item.AddNewCatVisibility"
                                   Color="@Color.Secondary" />
                </MudStack>

                @if (item.AddNewCatVisibility)
                {
                    <MudTextField class="-mt-2 mb-3 flex-none" T="string" Label="نام دسته بندی" Variant="Variant.Text" Immediate="false" ValueChanged="name =>  ViewModel.AddFastProductCategory(name,item.Id)"></MudTextField>
                }
                @foreach (var child in item.Children)
                {
                    <MudCard class="@(child.IsSelected ? "cursor-pointer border-dashed border-2 border-blue-400 " : "cursor-pointer" )" @onclick="()=>ViewModel.SelectCategory(child)">
                        <MudCardHeader>
                            <CardHeaderContent>
                                <MudText Typo="Typo.body1">@child.Name</MudText>
                            </CardHeaderContent>
                            <CardHeaderActions>
                                <MudStack Row="true" Spacing="1">
                                    <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                                   Size="@Size.Small"
                                                   class="mt-1"
                                                   Variant="@Variant.Outlined"
                                                   OnClick="async () => await ViewModel.EditProductCategoryClicked(child)"
                                                   Color="@Color.Info" />

                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                   Size="@Size.Small"
                                                   class="mt-1"
                                                   Variant="@Variant.Outlined"
                                                   OnClick="async () => await ViewModel.DeleteProductCategoryAsync(child.Id)"
                                                   Color="@Color.Error" />
                                </MudStack>
                            </CardHeaderActions>
                        </MudCardHeader>
                    </MudCard>
                }
            </MudStack>
        }


    </MudStack>
</MudPaper>

@code
{
    public CategoriesPageViewModel ViewModel { get; set; }
    protected override async Task OnInitializedAsync()
    {
        ViewModel = new CategoriesPageViewModel(NavigationManager, Snackbar, UserUtility, RestWrapper, DialogService);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }

}


            @* <MudPaper class="!max-h-[80vh] overflow-auto">
                <MudDataGrid FixedFooter="true" FixedHeader="true" Striped="true"
                             T="ProductCategorySDto" Items="@ViewModel.PageDto" CurrentPage="@ViewModel.CurrentPage"
                             RowsPerPage="15" Filterable="false" Loading="@ViewModel.IsProcessing"
                             SortMode="@SortMode.None" Groupable="false">
                    <ToolBarContent>
                        <MudTextField T="string" Placeholder="جست جو بر اساس نام" Adornment="Adornment.Start" Immediate="true"
                                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" class="my-auto"
                                      @bind-Value="@ViewModel.Search"
                                      OnAdornmentClick="@ViewModel.SearchAsync"></MudTextField>
                    </ToolBarContent>

                    <Columns>
                        <HierarchyColumn T="ProductCategorySDto" ButtonDisabledFunc="@(x => x.Description.IsNullOrEmpty())" />
                        <PropertyColumn Title="نام دسته" Resizable="false"  Property="arg => arg.Name"/>
                        <TemplateColumn Title="توضیحاتــ" Resizable="false" T="ProductCategorySDto">
                            <CellTemplate>
                                <p class="line-clamp-1">@context.Item.Description</p>
                            </CellTemplate>
                        </TemplateColumn>
                        <TemplateColumn Resizable="false" Title="دسته اصلی" T="ProductCategorySDto">
                            <CellTemplate>
                                @if (@context.Item.IsMain)
                                {
                                    <p>بلی</p>
                                }
                                else
                                {
                                    <p>خیر</p>

                                }
                            </CellTemplate>
                        </TemplateColumn>
                        <PropertyColumn Title="دسته پدر" Resizable="false" Property="arg => arg.ParentName" />
                        <TemplateColumn CellClass="d-flex justify-end">
                            <CellTemplate>
                                <MudStack Row="true">
                                    <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                                   Size="@Size.Small"
                                                   Variant="@Variant.Outlined"
                                                   OnClick="async () => await ViewModel.EditProductCategoryClicked(context.Item)"
                                                   Color="@Color.Info"/>

                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                   Size="@Size.Small"
                                                   Variant="@Variant.Outlined"
                                                   OnClick="async () => await ViewModel.DeleteProductCategoryAsync(context.Item.Id)"
                                                   Color="@Color.Error"/>
                                </MudStack>
                            </CellTemplate>
                        </TemplateColumn>
                    </Columns>

                    <ChildRowContent>
                        <MudCard>
                            <MudCardHeader>
                                <CardHeaderContent>
                                    <MudText Typo="Typo.h6">توضیحاتــ</MudText>
                                </CardHeaderContent>
                            </MudCardHeader>
                            <MudCardContent>
                                <MudText>@context.Item.Description</MudText>
                            </MudCardContent>
                        </MudCard>
                    </ChildRowContent>
                    <PagerContent>
                        <MudStack Row="true" class="w-full">

                            <MudPagination Rectangular="true" Variant="Variant.Filled" Count="@ViewModel.PageCount"
                                           SelectedChanged="@ViewModel.ChangePageAsync" class="mx-auto my-4"/>
                        </MudStack>

                    </PagerContent>
                </MudDataGrid>
            </MudPaper> *@