@using CMSMicroservice.Protobuf.Protos.Products
@using Microsoft.AspNetCore.Components.Forms
@using Tizzani.MudBlazor.HtmlEditor
@using BackOffice.Pages.AutoComplete

<MudDialog>
    <DialogContent>
        <MudStack Spacing="3">
            <MudStack Justify="Justify.Center" AlignItems="AlignItems.Center">
                @if (!string.IsNullOrWhiteSpace(_mainImagePreview))
                {
                    <img src="@GetFullImageUrl(_mainImagePreview)" alt="تصویر اصلی" style="width:220px; height:140px; object-fit:cover; border-radius:4px;" />
                }
                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="OnMainImageSelected">
                    <ActivatorContent>
                        <MudButton HtmlTag="label"
                                   Variant="Variant.Filled"
                                   Color="Color.Primary"
                                   ButtonType="ButtonType.Button"
                                   StartIcon="@Icons.Material.Filled.Image"
                                  >
                            تغییر تصویر اصلی
                        </MudButton>
                    </ActivatorContent>
                </MudFileUpload>
            </MudStack>

            <MudStack Row="true" AlignItems="AlignItems.Center">
                <MudItem xs="6">
                    <MudTextField T="string" @bind-Value="Model.Title" Disabled="_isLoading" Label="عنوان" Variant="Variant.Outlined" Margin="Margin.Dense" />
                </MudItem>
                <MudItem xs="6">
                    <MudNumericField T="long" HideSpinButtons="true" @bind-Value="Model.Price" Format="N0" Immediate="true" Disabled="_isLoading" Label="قیمت (تومان)" Variant="Variant.Outlined" Margin="Margin.Dense" />
                </MudItem>
            </MudStack>

            <MudStack Row="true" AlignItems="AlignItems.Center">
                <MudItem xs="12">
                    <MudNumericField T="int" HideSpinButtons="true" @bind-Value="Model.Discount" Disabled="_isLoading" Label="تخفیف (%)" Variant="Variant.Outlined" Margin="Margin.Dense" />
                </MudItem>
            </MudStack>

            <MudTextField T="string" @bind-Value="Model.ShortInfomation" Disabled="_isLoading" Label="خلاصه" Variant="Variant.Outlined" Margin="Margin.Dense" />

            <MudHtmlEditor @bind-Html="Model.FullInformation" MinHeight="300px">
                <MudHtmlToolbarOptions InsertImage="false" />
            </MudHtmlEditor>

            <MudStack Spacing="1">
                <MudText Typo="Typo.subtitle2">دسته‌بندی‌ها</MudText>
                <CategoryMultiSelectCombo @bind-SelectedIds="_selectedCategoryIds"
                                          Label="انتخاب دسته‌بندی‌ها"
                                          Disabled="_isLoading" />
                @if (_selectedCategoryIds?.Count > 0)
                {
                    <MudText Typo="Typo.caption">
                        تعداد دسته‌بندی‌های انتخاب‌شده: @_selectedCategoryIds.Count
                    </MudText>
                }
            </MudStack>

            <MudStack Spacing="1">
                <MudText Typo="Typo.subtitle2">تصویر بندانگشتی</MudText>
                @if (!string.IsNullOrWhiteSpace(_thumbnailPreview))
                {
                    <img src="@GetFullImageUrl(_thumbnailPreview)" alt="بندانگشتی" style="width:120px; height:80px; object-fit:cover; border-radius:4px;" />
                }
                else if (!string.IsNullOrWhiteSpace(Model.ThumbnailPath))
                {
                    <img src="@GetFullImageUrl(Model.ThumbnailPath)" alt="بندانگشتی" style="width:120px; height:80px; object-fit:cover; border-radius:4px;" />
                }
                <MudFileUpload T="IBrowserFile" Accept="image/*" FilesChanged="OnThumbnailSelected">
                    <ActivatorContent>
                        <MudButton HtmlTag="label"
                                   Variant="Variant.Outlined"
                                   Color="Color.Secondary"
                                   ButtonType="ButtonType.Button"
                                   StartIcon="@Icons.Material.Filled.Image"
                                  >
                            تغییر تصویر بندانگشتی (اختیاری)
                        </MudButton>
                    </ActivatorContent>
                </MudFileUpload>
            </MudStack>
        </MudStack>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel" Disabled="_isLoading">لغو</MudButton>
        <MudButton Color="Color.Primary" OnClick="@CallUpdateMethod" Disabled="_isLoading">ویرایش</MudButton>
    </DialogActions>
</MudDialog>
