@using Moonlight.App.Services.ServiceManage
@using Moonlight.App.Database.Entities.Store
@using BlazorTable
@using Moonlight.App.Models.Forms.Services

@inject ServiceService ServiceService

<SmartModal @ref="Modal" CssClasses="modal-dialog-centered modal-lg">
    <div class="modal-header">
        <h5 class="modal-title fs-3">Manage shared users</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <LazyLoader @ref="LazyLoader" Load="Load">
            <div class="mb-3">
                <SmartForm Model="Form" OnValidSubmit="Add">
                    <div class="input-group">
                        <input @bind="Form.Username" type="text" placeholder="Enter a username..." class="form-control"/>
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                </SmartForm>
            </div>
            @if (Users.Any())
            {
                <Table TableItem="User"
                       Items="Users"
                       PageSize="50"
                       TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6"
                       TableHeadClass="fw-bold text-muted">
                    <Column TableItem="User" Title="" Field="@(x => x.Id)" Sortable="false" Filterable="false">
                        <Template>
                            <div class="symbol symbol-50px me-5">
                                @if (context.Avatar == null)
                                {
                                    <img src="/assets/img/avatar.png" alt="Avatar">
                                }
                                else
                                {
                                    <img src="/api/bucket/avatars/@(context.Avatar)" alt="Avatar">
                                }
                            </div>
                            <span class="ms-3">@(context.Username)</span>
                        </Template>
                    </Column>
                    <Column TableItem="User" Title="" Field="@(x => x.Id)" Sortable="false" Filterable="false">
                        <Template>
                            <div class="text-end me-3">
                                <a @onclick="() => Remove(context)" @onclick:preventDefault href="#" class="text-danger">Remove</a>
                            </div>
                        </Template>
                    </Column>
                </Table>
            }
            else
            {
                <div class="d-flex justify-content-center py-4">
                    <span class="mt-3 fs-5">No users found</span>
                </div>
            }
        </LazyLoader>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
</SmartModal>

@code
{
    [Parameter]
    public Service Service { get; set; }

    private SmartModal Modal;
    private LazyLoader LazyLoader;
    private User[] Users;

    private AddUserToServiceForm Form = new();

    private async Task Load(LazyLoader _)
    {
        Users = await ServiceService.GetSharedUsers(Service);
    }

    private async Task Add()
    {
        await ServiceService.AddSharedUser(Service, Form.Username);
        Form = new();
        await LazyLoader.Reload();
    }

    private async Task Remove(User user)
    {
        await ServiceService.RemoveSharedUser(Service, user);
        await LazyLoader.Reload();
    }

    public async Task Show()
    {
        await Modal.Show();
    }

    public async Task Hide()
    {
        await Modal.Hide();
    }
}