@using BackOffice.Services.Blog
@using Microsoft.AspNetCore.Components.Forms
@using Tizzani.MudBlazor.HtmlEditor
@using BackOffice.Common.BaseComponents

<MudDialog>
    <DialogContent>
        <MudForm @ref="_form" @bind-IsValid="@_isValid">
            <MudStack Spacing="2">
                <MudTextField @bind-Value="Model.Title"
                              Label="عنوان پست"
                              Required="true"
                              Variant="Variant.Outlined" />

                <MudTextField @bind-Value="Model.Summary"
                              Label="خلاصه"
                              Variant="Variant.Outlined"
                              Lines="3" />

                <MudText Typo="Typo.subtitle2">محتوای HTML</MudText>
                <MudHtmlEditor @bind-Html="Model.HtmlContent" MinHeight="300px">
                    <MudHtmlToolbarOptions InsertImage="false" />
                </MudHtmlEditor>

                <MudText Typo="Typo.subtitle2">تصویر شاخص</MudText>
                <MudStack Justify="Justify.Center" AlignItems="AlignItems.Center">
                    @if (!string.IsNullOrWhiteSpace(_imagePreview))
                    {
                        <Image Src="@_imagePreview" Width="280" Height="180" ObjectPosition="ObjectPosition.Center" ObjectFit="ObjectFit.Cover" />
                    }
                    else if (!string.IsNullOrEmpty(Model.FeaturedImagePath))
                    {
                        <Image Src="@Model.FeaturedImagePath" Width="280" Height="180" ObjectPosition="ObjectPosition.Center" ObjectFit="ObjectFit.Cover" />
                    }
                    else
                    {
                        <MudPaper Class="d-flex align-center justify-center" Style="width:280px;height:180px;">
                            <MudText Typo="Typo.caption">تصویری انتخاب نشده است</MudText>
                        </MudPaper>
                    }

                    <MudFileUpload T="IBrowserFile" Accept="image/*" FilesChanged="OnImageSelected">
                        <ActivatorContent>
                            <MudButton HtmlTag="label"
                                       Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       ButtonType="ButtonType.Button"
                                       StartIcon="@Icons.Material.Filled.Image">
                                انتخاب تصویر شاخص
                            </MudButton>
                        </ActivatorContent>
                        <SelectedTemplate>
                            @if (context != null)
                            {
                                <MudText Class="mt-1" Typo="Typo.caption">@context.Name</MudText>
                            }
                        </SelectedTemplate>
                    </MudFileUpload>
                </MudStack>

                <MudSelect T="long"
                           Label="دسته‌بندی‌ها"
                           MultiSelection="true"
                           @bind-SelectedValues="_selectedCategoryIds"
                           Variant="Variant.Outlined"
                           MultiSelectionTextFunc="@(new Func<List<string>, string>(GetCategorySelectionText))">
                    @foreach (var cat in Categories)
                    {
                        <MudSelectItem T="long" Value="@cat.Id">@cat.Title</MudSelectItem>
                    }
                </MudSelect>

                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                    <MudSwitch T="bool" @bind-Value="Model.IsFeatured" Color="Color.Warning" />
                    <MudText Typo="Typo.body2">پست ویژه</MudText>
                </MudStack>

                <MudNumericField T="int"
                                 @bind-Value="Model.SortOrder"
                                 Label="ترتیب نمایش"
                                 Variant="Variant.Outlined" />
            </MudStack>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="SubmitAsync" Disabled="@(!_isValid || _loading)">
            @(_isEditMode ? "ذخیره تغییرات" : "ایجاد پست")
        </MudButton>
        <MudButton Color="Color.Default" Variant="Variant.Text" OnClick="Cancel">
            انصراف
        </MudButton>
    </DialogActions>
</MudDialog>