@inject ILogger<Edit> Logger
@inject IJSRuntime JSRuntime
@inject ICatalogItemService CatalogItemService

@inherits BlazorAdmin.Helpers.BlazorComponent

@namespace BlazorAdmin.Pages.CatalogItemPage

<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <EditForm Model="_item" OnValidSubmit="@SaveClick">
                <DataAnnotationsValidator />
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit @_item.Name</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    @if (_item == null)
                    {
                        <Spinner></Spinner>
                    }
                    else
                    {
                        <div class="container">
                            <div class="row">
                                @if (HasPicture)
                                {
                                    <img class="col-md-6 esh-picture" src="@LoadPicture">
                                }
                                <div class="col-md-@(HasPicture?"6":"12") ">

                                    <div class="form-group">
                                        <label class="control-label col-md-6">Name</label>
                                        <div class="col-md-12">
                                            <InputText class="form-control" @bind-Value="_item.Name" />
                                            <ValidationMessage For="(() => _item.Name)" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-6">Description</label>
                                        <div class="col-md-12">
                                            <InputText class="form-control" @bind-Value="_item.Description" />
                                            <ValidationMessage For="(() => _item.Description)" />
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label col-md-6">Brand</label>
                                        <div class="col-md-12">
                                            <CustomInputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
                                                @foreach (var brand in Brands)
                                                    {
                                                    <option value="@brand.Id.ToString()">@brand.Name</option>
                                                    }
                                            </CustomInputSelect>
                                            <ValidationMessage For="(() => _item.CatalogBrandId)" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-6">Type</label>
                                        <div class="col-md-12">
                                            <CustomInputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
                                                @foreach (var type in Types)
                                                    {
                                                    <option value="@type.Id">@type.Name</option>
                                                    }
                                            </CustomInputSelect>
                                            <ValidationMessage For="(() => _item.CatalogTypeId)" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-6">Price</label>
                                        <div class="col-md-12">
                                            <InputNumber @bind-Value="_item.Price" class="form-control" />
                                            <ValidationMessage For="(() => _item.Price)" />
                                        </div>
                                    </div>                                  
                                </div>
                            </div>
                        </div>
                    }
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        Save
                    </button>
                </div>
            </EditForm>
        </div>
    </div>
</div>



@if (_showEditModal)
{
    <div class="modal-backdrop fade show"></div>
}

@code {
    [Parameter]
    public IEnumerable<CatalogBrand> Brands { get; set; }
    [Parameter]
    public IEnumerable<CatalogType> Types { get; set; }

    [Parameter]
    public EventCallback<string> OnSaveClick { get; set; }

    private string LoadPicture => string.IsNullOrEmpty(_item.PictureBase64) ? string.IsNullOrEmpty(_item.PictureUri) ? string.Empty : $"{_item.PictureUri}" : $"data:image/png;base64, {_item.PictureBase64}";
    private bool HasPicture => !(string.IsNullOrEmpty(_item.PictureBase64) && string.IsNullOrEmpty(_item.PictureUri));
    private string _badFileMessage = string.Empty;
    private string _modalDisplay = "none;";
    private string _modalClass = "";
    private bool _showEditModal = false;
    private CatalogItem _item = new CatalogItem();

    private async Task SaveClick()
    {
        await CatalogItemService.Edit(_item);
        await OnSaveClick.InvokeAsync(null);
        await Close();
    }

    public async Task Open(int id)
    {
        Logger.LogInformation("Now loading... /Catalog/Edit/{Id}", id);

        await new Css(JSRuntime).HideBodyOverflow();

        _item = await CatalogItemService.GetById(id);

        _modalDisplay = "block;";
        _modalClass = "Show";
        _showEditModal = true;

        StateHasChanged();
    }

    private async Task Close()
    {
        await new Css(JSRuntime).ShowBodyOverflow();

        _modalDisplay = "none";
        _modalClass = "";
        _showEditModal = false;
    }
}