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

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

                    <MudStack>
                        <MudStack Spacing="0">

                            <MudText Typo="Typo.h6">اطلاعات کلی</MudText>
                            <MudText Typo="Typo.caption">اطلاعات کلی دسته بندی محصول را به دقت وارد کنید</MudText>
                        </MudStack>
                        <MudGrid>
                            <MudItem lg="6" md="6">
                                <MudTextField T="string" Label="نام فارسی برند" @bind-Value="@ViewModel.PageDto.PersianName" Variant="Variant.Outlined"></MudTextField>
                            </MudItem>
                            <MudItem lg="6" md="6">
                                <MudTextField T="string" Label="نام انگلیسی برند" @bind-Value="@ViewModel.PageDto.EnglishName" Variant="Variant.Outlined"></MudTextField>
                            </MudItem>
                            <MudItem lg="6" md="6">
                                <MudSelect T="bool" Label="آیا صفحه شخصی دارد ؟" @bind-Value="@ViewModel.PageDto.HasSpecialPage" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
                                    <MudSelectItem T="bool" Value="true"></MudSelectItem>
                                    <MudSelectItem T="bool" Value="false" />
                                </MudSelect>
                            </MudItem>
                            <MudItem lg="6" md="6">
                                <MudTextField T="string" Label="لینک صفحه شخصی برند" @bind-Value="@ViewModel.PageDto.PageUrl" Variant="Variant.Outlined"></MudTextField>
                            
                            </MudItem>

                            <MudItem sm="12" md="12" lg="12">
                                <MudStack class="mt-1 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()" />

                                    @foreach (var item in ViewModel.PageDto.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.PageDto.Files.Remove(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 lg="12" md="12">
                                <RichTextEditorUi @bind-Text="@ViewModel.PageDto.Description" ></RichTextEditorUi>
                            </MudItem>

                        </MudGrid>
                    </MudStack>
                </MudTabPanel>

                <MudTabPanel Text="متاتگ و سوالات متداول">

                    <MudGrid>
                        <MudItem xs="12">
                            <MudText Typo="Typo.h6">اطلاعات متا تگ</MudText>
                            <MudText Typo="Typo.caption">می توانید متا تگ های سئو برای صفحه مورد نظر را وارد کنید</MudText>
                            <MudGrid>

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

                                <MudItem lg="5" md="6">
                                    <MudTextField @bind-Value="@ViewModel.MetaTagValue" T="string" Label="مقدار" Variant="Variant.Outlined"></MudTextField>
                                </MudItem>

                                <MudItem lg="2" md="12">
                                    <MudButton Variant="Variant.Filled"
                                               Size="Size.Large"
                                               Color="Color.Info"
                                               class="mt-2 w-full py-3"
                                               OnClick="ViewModel.AddMetaTag"
                                               StartIcon="@Icons.Material.Outlined.Add">افزودن</MudButton>
                                </MudItem>

                                <MudItem sm="12">

                                    <MudDataGrid Items="@ViewModel.MetaTags"
                                                 T="MetaTagSDto"
                                                 Elevation="0"
                                                 Outlined="true"
                                                 Bordered="true"
                                                 Striped="true"
                                                 Filterable="false"
                                                 SortMode="@SortMode.None"
                                                 Groupable="false">
                                        <Columns>
                                            <PropertyColumn T="MetaTagSDto" TProperty="string" Property="x => x.Type" Title="نوع" />
                                            <PropertyColumn T="MetaTagSDto" TProperty="string" Property="x => x.Value" Title="مقدار" />
                                            <TemplateColumn T="MetaTagSDto" CellClass="d-flex justify-end">
                                                <CellTemplate>
                                                    <MudStack Row>
                                                        <MudButton DisableElevation="true"
                                                                   Size="@Size.Small"
                                                                   Variant="@Variant.Filled"
                                                                   OnClick="() => ViewModel.MetaTags.Remove(context.Item)"
                                                                   Color="@Color.Error"
                                                                   StartIcon="@Icons.Material.Outlined.Delete">حذف</MudButton>
                                                    </MudStack>
                                                </CellTemplate>
                                            </TemplateColumn>
                                        </Columns>
                                    </MudDataGrid>
                                </MudItem>

                            </MudGrid>
                        </MudItem>
                        <MudItem xs="12">

                            <MudText Typo="Typo.h6">سوالات متداول</MudText>
                            <MudText Typo="Typo.caption">می توانید سوالات متداول شهر موردنظر را وارد کنید</MudText>
                            <MudGrid class="mt-1">

                                <MudItem lg="5" md="6">
                                    <MudTextField @bind-Value="@ViewModel.FaqQuestion" T="string" Label="سوال" Variant="Variant.Outlined"></MudTextField>
                                </MudItem>

                                <MudItem lg="5" md="6">
                                    <MudTextField @bind-Value="@ViewModel.FaqAnswer" T="string" Label="پاسخ" Variant="Variant.Outlined"></MudTextField>
                                </MudItem>

                                <MudItem lg="2" md="12">
                                    <MudButton Variant="Variant.Filled"
                                               Size="Size.Large"
                                               Color="Color.Info"
                                               class="mt-2 w-full py-3"
                                               OnClick="ViewModel.AddFaq"
                                               StartIcon="@Icons.Material.Outlined.Add">افزودن</MudButton>
                                </MudItem>

                                <MudItem sm="12">
                                    <MudExpansionPanels class="mt-1" Elevation="2">
                                        @foreach (var item in ViewModel.Faqs)
                                        {
                                            <MudExpansionPanel>

                                                <TitleContent>
                                                    <MudStack Row="true">
                                                        <MudIconButton Icon="@Icons.Material.Outlined.Delete"
                                                                       Size="@Size.Small"
                                                                       Variant="@Variant.Outlined"
                                                                       Color="@Color.Error"
                                                                       OnClick="() => ViewModel.Faqs.Remove(item.Key)"/>
                                                        <MudText>@item.Key</MudText>
                                                    </MudStack>
                                                </TitleContent>
                                                <ChildContent>
                                                    @item.Value
                                                </ChildContent>
                                            </MudExpansionPanel>
                                        }
                                    </MudExpansionPanels>
                                </MudItem>

                            </MudGrid>
                        </MudItem>
                    </MudGrid>
                </MudTabPanel>
            </MudTabs>
        </MudContainer>
    </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; }
    [Parameter]
    public BrandSDto? Brand { get; set; }


    public BrandActionDialogBoxViewModel ViewModel { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ViewModel = Brand == null ? new BrandActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog) : 
            new BrandActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog, Brand);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }
}