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


<MudDialog class="mx-auto h-screen overflow-y-auto p-0">
    <DialogContent>
        <MudContainer class="p-0">
            <MudStack Row="true">
                <MudText Typo="Typo.h6" class="my-auto">افزودن سریع محصول</MudText>
                <MudSpacer />
                <MudIconButton Icon="@Icons.Material.Filled.Close" OnClick="()=>MudDialog.Close(DialogResult.Ok(true))"></MudIconButton>
            </MudStack>
            <MudAlert Dense="true" NoIcon="true" Variant="Variant.Outlined" ContentAlignment="HorizontalAlignment.Center" class="mb-4 mt-2" Severity="Severity.Warning">در این صفحه تنها اطلاعات اولیه ثبت میشوند و باید برای تکمیل اطلاعات محصول به صحفه اصلی تغییرات محصول بروید</MudAlert>
            <MudStack Row="true" class="no-scrollbar h-full w-full overflow-x-auto">
                <MudStack class="min-w-[310px]">
                    <MudText Typo="Typo.h6"><b>1. انتخاب دسته بندی</b></MudText>
                    <MudTextField class="-mt-3 flex-none" T="string" Label="جست جو دسته" />
                    <MudTreeView MultiSelection="false" @bind-SelectedValue="@ViewModel.SelectedCategory" T="ProductCategorySDto" ServerData="ViewModel.LoadCategories" Items="ViewModel.Categories">
                        <ItemTemplate>
                            <MudTreeViewItem class="my-1" Value="@context" LoadingIconColor="Color.Info"
                                             Text="@context.Name"
                                             EndTextTypo="@Typo.caption" />
                        </ItemTemplate>
                    </MudTreeView>
                </MudStack>
                <MudDivider Vertical="true" FlexItem="true" class="mx-1" />

                <MudStack class="min-w-[310px] sm:w-full">
                    <MudStack Row="true">
                        <MudText Typo="Typo.h6">1. افزودن محصول به <b> @ViewModel.SelectedCategory?.Name</b></MudText>
                        <MudSpacer/>

                        <MudButton Disabled="@ViewModel.FormEnable.Not()" Variant="Variant.Outlined" Color="Color.Success" StartIcon="@Icons.Material.Filled.Check" OnClick="@ViewModel.SubmitCreateProduct">ثبت محصول</MudButton>
                    </MudStack>
                    <MudGrid Spacing="1" class="-ml-1 w-full">
                        <MudItem xs="12" md="6">
                            <MudTextField Disabled="@ViewModel.FormEnable.Not()" @bind-Value="@ViewModel.PageDto.PersianName" Variant="Variant.Outlined" T="string" Label="نام فارسی کالا" />
                        </MudItem>
                        <MudItem xs="12" md="6">
                            <MudAutocomplete Disabled="@ViewModel.FormEnable.Not()"
                                             Required="true"
                                             ToStringFunc="dto => dto.PersianName"
                                             Strict="true"
                                             @bind-Value="@ViewModel.SelectedBrand"
                                             SearchFunc="ViewModel.SearchBrand"
                                             @bind-Text="@brandAutocompleteText"
                                             T="BrandSDto"
                                             Label="برند"
                                             Variant="Variant.Outlined">
                                <NoItemsTemplate>
                                    <MudStack Row="true" class="p-1">
                                        <MudChip Variant="Variant.Text" class="my-auto"
                                                 Color="Color.Info">@brandAutocompleteText</MudChip>
                                        <MudSpacer />
                                        <MudIconButton Icon="@Icons.Material.Filled.Add"
                                                       Size="@Size.Small"
                                                       Variant="@Variant.Outlined"
                                                       OnClick="()=>ViewModel.AddBrand(brandAutocompleteText)"
                                                       Color="@Color.Secondary" />
                                    </MudStack>
                                </NoItemsTemplate>
                                <BeforeItemsTemplate>
                                    @if (!brandAutocompleteText.IsNullOrEmpty())
                                    {
                                        <MudStack Row="true">
                                            <MudChip Variant="Variant.Text" class="my-auto"
                                                     Color="Color.Info">@brandAutocompleteText</MudChip>
                                            <MudSpacer />
                                            <MudIconButton Icon="@Icons.Material.Filled.Add"
                                                           Size="@Size.Small"
                                                           Variant="@Variant.Outlined"
                                                           Color="@Color.Secondary" />
                                        </MudStack>
                                    }
                                </BeforeItemsTemplate>
                                <ProgressIndicatorInPopoverTemplate>
                                    <MudList Clickable="false">
                                        <MudListItem>
                                            <div class="mx-auto flex w-full flex-row">
                                                <MudProgressCircular class="my-auto -ml-4 mr-1" Size="Size.Small" Indeterminate="true" />
                                                <p class="text-md mx-auto my-1 font-bold">منتظر بمانید</p>
                                            </div>
                                        </MudListItem>
                                    </MudList>
                                </ProgressIndicatorInPopoverTemplate>
                                <ItemTemplate Context="e">
                                    <p>@e.PersianName</p>
                                </ItemTemplate>
                            </MudAutocomplete>
                        </MudItem>
                        <MudItem xs="12" md="6">
                            <MudTextField Disabled="@ViewModel.FormEnable.Not()" @bind-Value="@ViewModel.PageDto.Stock" Variant="Variant.Outlined" T="int" Label="تعداد موجودی" />
                        </MudItem>
                        <MudItem xs="12" md="6">
                            <MudTextField Disabled="@ViewModel.FormEnable.Not()" @bind-Value="@ViewModel.PageDto.Cost" Format="N0" Variant="Variant.Outlined" T="double" Label="قیمت ( تومان )" />
                        </MudItem>
                    </MudGrid>
                    <MudExpansionPanels  DisableBorders="false">
                        <MudExpansionPanel  Text="ویژگی ها ( اختیاری )">
                            <MudGrid>


                                <MudItem xs="12" lg="6" md="6">
                                    <MudTextField @bind-Value="@ViewModel.SpecificationTitle" T="string" Label="عنوان" Variant="Variant.Outlined"></MudTextField>
                                </MudItem>

                                <MudItem xs="12" lg="6" md="6">
                                    <MudStack Row="true">

                                        <MudTextField @bind-Value="@ViewModel.SpecificationValue" T="string" Label="مقدار" Variant="Variant.Outlined"></MudTextField>

                                        <MudButton Variant="Variant.Filled"
                                                   Size="Size.Large"
                                                   Color="Color.Info"
                                                   class="mt-2 py-2"
                                                   OnClick="ViewModel.AddSpecification"
                                                   StartIcon="@Icons.Material.Outlined.Add">افزودن</MudButton>
                                    </MudStack>
                                </MudItem>

                                <MudItem xs="12">
                                    <MudDataGrid Items="@ViewModel.Specifications" Elevation="0" Outlined="true" Bordered="true" Striped="true" Filterable="false" SortMode="@SortMode.None" Groupable="false">
                                        <Columns>
                                            <PropertyColumn Property="x => x.Title" Title="عنوان" />
                                            <PropertyColumn Property="x => x.Value" Title="مقدار" />
                                            <TemplateColumn T="SpecificationSDto" CellClass="d-flex justify-end">
                                                <CellTemplate>
                                                    <MudStack Row>
                                                        <MudButton DisableElevation="true"
                                                                   Size="@Size.Small"
                                                                   Variant="@Variant.Filled"
                                                                   OnClick="()=>ViewModel.RemoveSpecification(context.Item)"
                                                                   Color="@Color.Error"
                                                                   StartIcon="@Icons.Material.Outlined.Delete">حذف</MudButton>
                                                    </MudStack>
                                                </CellTemplate>
                                            </TemplateColumn>
                                        </Columns>
                                    </MudDataGrid>
                                </MudItem>
                            </MudGrid>
                        </MudExpansionPanel>
                    </MudExpansionPanels>
                    <MudFileUpload T="IReadOnlyList<IBrowserFile>"
                                   AppendMultipleFiles
                                   OnFilesChanged="@ViewModel.OnInputFileChanged"
                                   Hidden="@false"
                                   Disabled="@ViewModel.FormEnable.Not()"
                                   InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20"
                                   InputStyle="opacity:0"
                                   class="flex-none"
                                   Accept=".png, .jpg"
                                   @ondragenter="@ViewModel.SetDragClass"
                                   @ondragleave="@ViewModel.ClearDragClass"
                                   @ondragend="@ViewModel.ClearDragClass">
                        <ButtonTemplate>
                            <MudPaper Height="300px"
                                      Outlined="true"
                                      Class="@ViewModel.DragClass">
                                <MudText Typo="Typo.h6">
                                    فایل های خود را داخل کادر بکشید یا با کلیک روی کادر انتخاب کنید
                                </MudText>
                                @foreach (var file in ViewModel.FileNames)
                                {
                                    <MudChip Color="Color.Dark" Text="@file" />
                                }
                            </MudPaper>
                        </ButtonTemplate>
                    </MudFileUpload>
                </MudStack>


            </MudStack>
        </MudContainer>
    </DialogContent>
</MudDialog>
@code
{

    [CascadingParameter]
    MudDialogInstance MudDialog { get; set; }

    string brandAutocompleteText = string.Empty;
    public FastProductCreateDialogBoxViewModel ViewModel { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ViewModel = new FastProductCreateDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }

}