@using BackOffice.Services.Content
@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.SectionKey"
                              Label="کلید بخش (اختیاری)"
                              Variant="Variant.Outlined"
                              HelperText="در صورت خالی بودن، به صورت خودکار تولید می‌شود" />

                <MudTextField @bind-Value="Model.Title"
                              Label="عنوان"
                              Required="true"
                              Variant="Variant.Outlined" />

                <MudTextField @bind-Value="Model.Subtitle"
                              Label="زیرعنوان"
                              Variant="Variant.Outlined" />

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

                <MudTextField @bind-Value="Model.IconName"
                              Label="نام آیکون"
                              Variant="Variant.Outlined" />

                <MudText Typo="Typo.subtitle2">تصویر بخش</MudText>
                <MudStack Justify="Justify.Center" AlignItems="AlignItems.Center">
                    @if (!string.IsNullOrWhiteSpace(_imagePreview))
                    {
                        <Image Src="@_imagePreview" Width="220" Height="140" ObjectPosition="ObjectPosition.Center" ObjectFit="ObjectFit.Cover" />
                    }
                    else if (!string.IsNullOrEmpty(Model.ImagePath))
                    {
                        <Image Src="@Model.ImagePath" Width="220" Height="140" ObjectPosition="ObjectPosition.Center" ObjectFit="ObjectFit.Cover" />
                    }
                    else
                    {
                        <MudPaper Class="d-flex align-center justify-center" Style="width:220px;height:140px;">
                            <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>

                <MudNumericField T="int"
                                 @bind-Value="Model.SortOrder"
                                 Label="ترتیب نمایش"
                                 Variant="Variant.Outlined" />

                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                    <MudSwitch T="bool" @bind-Value="Model.IsActive" Color="Color.Primary" />
                    <MudText Typo="Typo.body2">فعال</MudText>
                </MudStack>

                <MudTextField @bind-Value="Model.ExtraData"
                              Label="داده‌های اضافی (JSON)"
                              Variant="Variant.Outlined"
                              Lines="3"
                              HelperText="اطلاعات اضافی به صورت JSON" />
            </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>
