@page "/personalization/nav"
@attribute [Microsoft.AspNetCore.Authorization.Authorize]

@inject IDialogService DialogService
@inject NavigationManager NavigationManager
@inject ISnackbar Snackbar
@inject IUserUtility UserUtility
@inject IRestWrapper RestWrapper

<MudStack class="w-full p-8 h-screen bg-[--mud-palette-background-grey]">
    <MudPaper class="px-5 py-5">
        <MudStack>
            <MudStack Row="true">
                <MudStack class="mb-5 mx-2">
                    <MudText Typo="Typo.h4">تنظیمات فهرست ها</MudText>
                    <MudText Typo="Typo.caption">فهرست های بالای سایت خود را ویرایش نمایید</MudText>
                </MudStack>

                <MudSpacer />
                <BaseButtonUi Size="Size.Large"
                              OnClickCallback="ViewModel.SubmitNavMenuSettingAsync"
                              class="mt-2 mb-8 w-64 rounded-md"
                              IsProcessing="@ViewModel.IsProcessing"
                              Icon="@Icons.Material.Outlined.Check"
                              Content="ثبتـــ اطلاعات" Variant="Variant.Filled" Color="Color.Success" />
            </MudStack>
            <MudStack Row="true">
                <MudSwitch @bind-Value="@ViewModel.PageDto.ShowProductCategories" class="mt-2" Size="Size.Large" T="bool" Label="تنها دسته بندی محصولات را نمایش بدهد ؟" Color="Color.Info" />
                <MudSpacer />
                <MudSwitch @bind-Value="@ViewModel.PageDto.ShowBlogCategories" class="mt-2" Size="Size.Large" T="bool" Label="تنها دسته بندی بلاگ ها را نمایش بدهد ؟" Color="Color.Info" />
            </MudStack>
            <MudGrid class="!max-h-[80vh] overflow-auto">
                <MudItem xs="6">
                    
                    <MudDivider />
                    <MudText Typo="Typo.h6">افزودن فهرست جدید</MudText>
                    
                    <MudTextField @bind-Value="@ViewModel.NewNavItem.Title" T="string" Label="عنوان" Variant="Variant.Outlined" />
                    
                    <MudTextField class="my-3" @bind-Value="@ViewModel.NewNavItem.Url" T="string" Label="لینک" Variant="Variant.Outlined" />
                    
                    <MudButton class="w-full mt-1" Variant="Variant.Outlined" Color="Color.Secondary" OnClick="()=>{ViewModel.SubmitAddNewNavItem();}">افزودن +</MudButton>

                    <MudDivider class="my-3" />
                    <MudText class="mb-4" Typo="Typo.h6">افزودن از اطلاعات موجود</MudText>
                    <MudAutocomplete @bind-value="ViewModel.SelectedBlogCategory"
                                     OnAdornmentClick="@ViewModel.AddFromBlogCategory"
                                     AdornmentIcon="@Icons.Material.Filled.Check"
                                     class="my-2" Required="true" ToStringFunc="dto => dto.Name"
                                     SearchFunc="@ViewModel.SearchBlogCategoryAsync"
                                     T="BlogCategorySDto"
                                     Label="افزودن از دسته وبلاگ"
                                     Variant="Variant.Outlined">
                        <ProgressIndicatorInPopoverTemplate>
                            <MudList Clickable="false">
                                <MudListItem>
                                    <div class="flex flex-row w-full mx-auto">
                                        <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                        <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                    </div>
                                </MudListItem>
                            </MudList>
                        </ProgressIndicatorInPopoverTemplate>
                        <ItemTemplate Context="e">
                            <p>@e.Name</p>
                        </ItemTemplate>
                    </MudAutocomplete>

                    <MudAutocomplete class="my-2" Required="true" ToStringFunc="dto => dto.Name"
                                     @bind-value="ViewModel.SelectedProductCategory"
                                     OnAdornmentClick="@ViewModel.AddFromProductCategory"
                                     AdornmentIcon="@Icons.Material.Filled.Check"
                                     SearchFunc="@ViewModel.SearchProductCategoryAsync"
                                     T="ProductCategorySDto"
                                     Label="افزودن از دسته محصولات"
                                     Variant="Variant.Outlined">
                        <ProgressIndicatorInPopoverTemplate>
                            <MudList Clickable="false">
                                <MudListItem>
                                    <div class="flex flex-row w-full mx-auto">
                                        <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                        <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                    </div>
                                </MudListItem>
                            </MudList>
                        </ProgressIndicatorInPopoverTemplate>
                        <ItemTemplate Context="e">
                            <p>@e.Name</p>
                        </ItemTemplate>
                    </MudAutocomplete>

                    <MudAutocomplete class="my-2" Required="true" ToStringFunc="dto => dto.Title"
                                     @bind-value="ViewModel.SelectedBlog"
                                     OnAdornmentClick="@ViewModel.AddFromBlog"
                                     AdornmentIcon="@Icons.Material.Filled.Check"
                                     SearchFunc="@ViewModel.SearchBlogAsync"
                                     T="BlogSDto"
                                     Label="افزودن از بلاگ ها"
                                     Variant="Variant.Outlined">
                        <ProgressIndicatorInPopoverTemplate>
                            <MudList Clickable="false">
                                <MudListItem>
                                    <div class="flex flex-row w-full mx-auto">
                                        <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                        <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                    </div>
                                </MudListItem>
                            </MudList>
                        </ProgressIndicatorInPopoverTemplate>
                        <ItemTemplate Context="e">
                            <p>@e.Title</p>
                        </ItemTemplate>
                    </MudAutocomplete>

                    <MudAutocomplete class="my-2" Required="true" ToStringFunc="dto => dto.PersianName"
                                     @bind-value="ViewModel.SelectedProduct"
                                     OnAdornmentClick="@ViewModel.AddFromProduct"
                                     AdornmentIcon="@Icons.Material.Filled.Check"
                                     SearchFunc="@ViewModel.SearchProductAsync"
                                     T="ProductSDto"
                                     Label="افزودن از محصولات"
                                     Variant="Variant.Outlined">
                        <ProgressIndicatorInPopoverTemplate>
                            <MudList Clickable="false">
                                <MudListItem>
                                    <div class="flex flex-row w-full mx-auto">
                                        <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                        <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                    </div>
                                </MudListItem>
                            </MudList>
                        </ProgressIndicatorInPopoverTemplate>
                        <ItemTemplate Context="e">
                            <p>@e.PersianName</p>
                        </ItemTemplate>
                    </MudAutocomplete>
                </MudItem>
                <MudItem xs="6">
                    <MudExpansionPanels>
                        @foreach (var navMenuItem in ViewModel.NavMenuItems)
                        {
                            <MudExpansionPanel>
                                <TitleContent>
                                    <MudStack Row="true">
                                        <MudText class="my-auto">@navMenuItem.Title</MudText>
                                        <MudSpacer />
                                        <MudIconButton Icon="@Icons.Material.Filled.Delete" OnClick="()=>{ViewModel.RemoveNavItem(navMenuItem.Id);}" Color="Color.Error"></MudIconButton>
                                    </MudStack>
                                </TitleContent>
                                <ChildContent>
                                    <MudAutocomplete class="my-2" Required="true" ToStringFunc="dto => dto.Title"
                                                     SearchFunc="@ViewModel.SearchNavMenuItem"
                                                     @bind-value="navMenuItem.Parent"
                                                     OnAdornmentClick="() => { ViewModel.AddNavMenuItemParent(navMenuItem.Id); }"
                                                     AdornmentIcon="@Icons.Material.Filled.Check"
                                                     T="NavMenuItem"
                                                     Label="پدر فهرست"
                                                     Variant="Variant.Outlined">
                                        <ProgressIndicatorInPopoverTemplate>
                                            <MudList Clickable="false">
                                                <MudListItem>
                                                    <div class="flex flex-row w-full mx-auto">
                                                        <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
                                                        <p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
                                                    </div>
                                                </MudListItem>
                                            </MudList>
                                        </ProgressIndicatorInPopoverTemplate>
                                        <ItemTemplate Context="e">
                                            <p>@e.Title</p>
                                        </ItemTemplate>
                                    </MudAutocomplete>

                                    <MudTextField class="my-3" @bind-Value="@navMenuItem.Title" T="string" Label="عنوان" Variant="Variant.Outlined" />
                                    <MudTextField class="my-3" @bind-Value="@navMenuItem.Url" T="string" Label="لینک" Variant="Variant.Outlined" />
                                    

                                </ChildContent>
                            </MudExpansionPanel>
                        }
                    </MudExpansionPanels>
                </MudItem>
            </MudGrid>
        </MudStack>
    </MudPaper>
</MudStack>

@code {

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