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

<MudDialog class="mx-auto">
    <DialogContent>
        <div class="flex flex-row">
            <MudStack class="grow " Spacing="0">
                <MudText Typo="Typo.h6">انتخاب یا اپلود عکس جدید</MudText>
                <MudText Typo="Typo.body2">میتوانید از بین عکس های اپلود شده یکی را انتخاب کرده یا عکس جدیدی اپلود کنید</MudText>
            </MudStack>

            <MudFileUpload class="flex-none" T="IBrowserFile" OnFilesChanged="@ViewModel.FileChangeForUpload">
                <ButtonTemplate>

                    <MudButton HtmlTag="label"
                               class="h-full"
                               Variant="Variant.Filled"
                               Color="Color.Info"
                               StartIcon="@Icons.Material.Filled.CloudUpload"
                               for="@context.Id">
                        اپلود فایل جدید
                    </MudButton>
                </ButtonTemplate>
            </MudFileUpload>
        </div>

        <MudTextField T="string" Placeholder="جست جو بر اساس نام فایل" Adornment="Adornment.Start" Immediate="true"
                      Clearable="true"
                      ValueChanged="@ViewModel.SearchChanged"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium"
                      Variant="Variant.Outlined"
                      OnAdornmentClick="@ViewModel.SearchAsync"></MudTextField>
        <MudContainer class="max-h-[30rem]" Style="overflow-y: scroll">
            <div class="flex flex-wrap justify-center">
                @foreach (var item in ViewModel.Files)
                {
                    @if (item.Selected)
                    {
                        <MudImage @onclick="()=>ViewModel.UnSelectFile(item)" class="cursor-pointer rounded-lg mx-1 w-52 h-52 mt-2 border-solid border-4 border-blue-500" Src="@item.GetLink()" Elevation="25" />
                    }
                    else
                    {
                        <MudImage @onclick="()=>ViewModel.SelectFile(item)" class="cursor-pointer rounded-lg mx-1 w-52 h-52 mt-2" Src="@item.GetLink()" Elevation="25" />
                    }
                }
            </div>
        </MudContainer>
    </DialogContent>

    <DialogActions>
        <MudStack Row="true" class="w-full mx-1 mb-2">


            <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
                          Icon="@Icons.Material.Outlined.Check"
                          Variant="Variant.Filled" Color="Color.Success"
                          OnClickCallback="ViewModel.SelectFile"
                          Content="انتخابــ" />
            <MudCheckBox class="my-auto" T="bool" Size="Size.Large" @bind-Value="@ViewModel.IsPrimary" Label="عکس اصلی" Color="Color.Primary" />
            <MudCheckBox class="my-auto" T="bool" Size="Size.Large" @bind-Value="@ViewModel.IsHeader" Label="عکس هدر" Color="Color.Primary" />
            <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 FileUploadType FileUploadType { get; set; } = FileUploadType.Image;

    public StorageDialogBoxViewModel ViewModel { get; set; }

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