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


<MudDialog class="mx-auto">
    <DialogContent>
        <MudContainer class="h-full">
            <MudTabs Outlined="true" Elevation="0" Rounded="true" Centered="true">
                <MudTabPanel class="h-full" Text="اطلاعات کلی" Icon="@Icons.Material.Outlined.Info">
                    <div class="h-full">
                        <MudStack Spacing="0" class="mt-4">

                            <MudText Typo="Typo.h6">اطلاعات کلی</MudText>
                            <MudText Typo="Typo.caption">اطلاعات کلی محصول را به دقت وارد کنید</MudText>
                        </MudStack>
                        <MudGrid>

                            <MudItem lg="4" md="6">
                                <MudTextField @bind-Value="@ViewModel.Title" T="string" Label="عنوان بلاگ" Variant="Variant.Outlined" />
                            </MudItem>
                            <MudItem lg="4" md="6">

                                <MudAutocomplete Required="true" ToStringFunc="dto => dto.Name" @bind-Value="@ViewModel.SelectedCategory"
                                                 SearchFunc="ViewModel.SearchBlogCategory"
                                                 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>
                            </MudItem>
                            <MudItem lg="4" md="6">
                                <MudSelect T="bool" @bind-Value="@ViewModel.IsSuggested" Label="آیا پیشنهادویژه است ؟" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                                    <MudSelectItem T="bool" Value="true" />
                                    <MudSelectItem T="bool" Value="false" />
                                </MudSelect>
                            </MudItem>
                            <MudItem lg="12" md="12">
                                <MudStack>
                                    <MudTextField @bind-Value="@ViewModel.Tags" T="string" Label="تگ ها" HelperText="تگ ها را با , میتوانید جدا کنید" HelperTextOnFocus="true" Variant="Variant.Outlined" />
                                </MudStack>
                            </MudItem>
                            <MudItem lg="12" md="12">
                                <MudTextField class="-mt-3" @bind-Value="@ViewModel.Summery" T="string" Label="توضیحاتــ کوتاه" Variant="Variant.Outlined"></MudTextField>
                            </MudItem>
                        </MudGrid>
                    </div>
                </MudTabPanel>
                <MudTabPanel Text="متن اصلی بلاگ" Icon="@Icons.Material.Outlined.Article">

                    <div class="min-h-[33rem]">
                        <MudStack class="mt-4" Spacing="0">

                            <MudText Typo="Typo.h6">متن بلاگ</MudText>
                            <MudText Typo="Typo.caption">می توانید کتن کامل بلاگــــ خود را کامل وارد کنید</MudText>
                        </MudStack>
                        <MudGrid>
                            <MudItem sm="12" class="!text-black">
                                
                                <RichTextEditorUi @bind-Text="@ViewModel.Content"  />

                            </MudItem>
                        </MudGrid>
                    </div>
                </MudTabPanel>
                <MudTabPanel Text="تـــــصاویر" Icon="@Icons.Material.Outlined.ImageSearch">

                    <div class="min-h-[33rem]">
                        <MudStack class="mt-4 mb-2" 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>
                    </div>

                </MudTabPanel>
            </MudTabs>
        </MudContainer>
    </DialogContent>
    <DialogActions>
        <MudStack Row="true" class="w-full h-fit mx-4 bottom-0">

            @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; }

    [Parameter]
    public BlogSDto? Blog { get; set; }

    public BlogActionDialogBoxViewModel ViewModel { get; set; }

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

}