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

<MudDialog class="mx-auto" DisableSidePadding="true">
    <DialogContent>
        <MudStack class="mx-5 overflow-x-hidden overflow-y-hidden">
            <MudDivider class="-mt-3" />
            <MudStack Spacing="0">

                <MudText Typo="Typo.h6">اطلاعات کلی</MudText>
                <MudText Typo="Typo.caption">اطلاعات کلی دسته بندی محصول را به دقت وارد کنید</MudText>
            </MudStack>
            <MudGrid>
                <MudItem sm="12" lg="4" md="6">
                    <MudTextField T="string" @bind-Value="@ViewModel.Name" Label="نام دسته بندی" Variant="Variant.Outlined"></MudTextField>
                </MudItem>
                <MudItem sm="12" lg="4" md="6">
                    <MudSelect T="bool" @bind-Value="@ViewModel.IsMain" Label="آیا دسته بندی اصلی است ؟" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                        <MudSelectItem T="bool" Value="true" />
                        <MudSelectItem T="bool" Value="false" />
                    </MudSelect>
                </MudItem>
                <MudItem sm="12" lg="4" md="6">
                    <MudAutocomplete Required="true" ToStringFunc="dto => dto.Name" @bind-Value="@ViewModel.SelectedCategory"
                                     SearchFunc="ViewModel.SearchCategory"
                                     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>
                </MudItem>
                <MudItem sm="12" md="12" lg="12">
                    <MudStack class="mt-2 mb-4" Spacing="0">

                        <MudText Typo="Typo.h6">تصاویر برند</MudText>
                        <MudText Typo="Typo.caption">می توانید برای برند چند تصویر اپلود کنید</MudText>
                    </MudStack>
                    <MudStack Row="true">
                        <MudIconButton HtmlTag="label"
                                       Color="Color.Info"
                                       Variant="Variant.Outlined"
                                       class="w-28 h-28"
                                       Size="Size.Large"
                                       Icon="@Icons.Material.Outlined.Wallpaper"
                                       OnClick="async () => await ViewModel.SelectFileAsync()">
                        </MudIconButton>
                        @foreach (var item in ViewModel.Files)
                        {
                            <div class="w-28 h-28">
                                <MudImage Src="@item.GetLink()" Elevation="25" Class="rounded-lg w-28 h-28 absolute" />

                                <MudIconButton DisableElevation="true"
                                               class="absolute m-1.5"
                                               Size="@Size.Small"
                                               Variant="@Variant.Filled"
                                               OnClick="() => ViewModel.RemoveFile(item)"
                                               Color="@Color.Error"
                                               Icon="@Icons.Material.Outlined.Delete" />
                                @if (item.IsHeader)
                                {
                                    <p class="bg-pink-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">هدر</p>
                                }
                                @if (item.IsPrimary)
                                {
                                    <p class="bg-blue-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">اصلی</p>
                                }
                            </div>
                        }

                    </MudStack>
                </MudItem>
                <MudItem sm="12" lg="12" md="12">
                    <MudContainer class="max-h-[20rem] lg:max-h-[25rem] overflow-y-scroll overflow-x-hidden">
                        <MudStack class="mt-4 mb-2" Spacing="0">

                            <MudText Typo="Typo.h6">توضیحات تکمیلی</MudText>
                            <MudText Typo="Typo.caption">می توانید توضیحاتــ تکمیلی محصول را کامل وارد کنید</MudText>
                        </MudStack>
                        <RichTextEditorUi @bind-Text="@ViewModel.Description" />
                    </MudContainer>
                </MudItem>

            </MudGrid>
        </MudStack>
    </DialogContent>
    <DialogActions>

        <MudStack Row="true" class="w-full mx-4 mb-2">

            @if (ViewModel.IsEditing)
            {
                <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
                              Icon="@Icons.Material.Outlined.Check"
                              Variant="Variant.Filled" Color="Color.Success"
                              Content="ثبت ویرایش" OnClickCallback="ViewModel.SubmitEditAsync" />
            }
            else
            {
                <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
                              Icon="@Icons.Material.Outlined.Check"
                              Variant="Variant.Filled" Color="Color.Success"
                              Content="تایید" OnClickCallback="ViewModel.SubmitCreateAsync" />
            }
            <MudSpacer />
            <MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Error" OnClick="ViewModel.Cancel">بستن</MudButton>
        </MudStack>
    </DialogActions>
</MudDialog>
@code 
{

    [CascadingParameter]
    MudDialogInstance MudDialog { get; set; }

    public ProductCategoryActionDialogBoxViewModel ViewModel { get; set; }

    [Parameter]
    public ProductCategorySDto? Category { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (Category == null)
            ViewModel = new ProductCategoryActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, MudDialog,DialogService);
        else
            ViewModel = new ProductCategoryActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, MudDialog, DialogService, Category);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }
}