@using Moonlight.App.Database.Entities
@using Moonlight.App.Models.Forms
@using Moonlight.App.Models.Plesk.Resources
@using Moonlight.App.Services

@inject SmartTranslateService SmartTranslateService
@inject WebsiteService WebsiteService

<LazyLoader @ref="LazyLoader" Load="Load">
    <div class="card w-100 mb-4">
        <div class="card-body py-2">
            
            <div class="my-4 w-100">
                <SmartForm Model="Model" OnValidSubmit="OnValidSubmit">
                    <div class="input-group">
                        <InputText @bind-Value="Model.Name" type="text" class="form-control" placeholder="@(SmartTranslateService.Translate("Name"))"></InputText>
                        <InputText @bind-Value="Model.Password" type="password" class="form-control" placeholder="@(SmartTranslateService.Translate("Password"))"></InputText>
                        <button class="btn btn-primary" type="submit">
                            <TL>Create</TL>
                        </button>
                    </div>
                </SmartForm>
            </div>
        </div>
    </div>
    @if (Databases.Any())
    {
        @foreach (var databases in Databases.Chunk(2))
        {
            <div class="row">
                @foreach (var database in databases)
                {
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">
                                    <span>@(database.Name) - @(database.Type.ToUpper().Replace("MYSQL", "MySQL"))</span>
                                </div>
                            </div>
                            <div class="card-body me-1">
                                <table class="w-100 table-layout-fixed">
                                    <tr>
                                        <td class="w-25">
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                <TL>Host</TL>
                                            </label>
                                        </td>
                                        <td class="pb-2">
                                            <input type="text" class="form-control form-control-solid disabled" disabled="disabled" value="@(Host)">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                <TL>Port</TL>
                                            </label>
                                        </td>
                                        <td class="pb-2">
                                            <input type="text" class="form-control form-control-solid disabled" disabled="disabled" value="@(DatabaseServer.Port)">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                <TL>Username</TL>
                                            </label>
                                        </td>
                                        <td class="pb-2">
                                            <input type="text" class="form-control form-control-solid disabled" disabled="disabled" value="@(database.Name)">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                <TL>Database</TL>
                                            </label>
                                        </td>
                                        <td class="pb-2">
                                            <input type="text" class="form-control form-control-solid disabled" disabled="disabled" value="@(database.Name)">
                                        </td>
                                    </tr>
                                </table>
                                <div class="text-end mt-2">
                                    <DeleteButton Confirm="true" OnClick="() => DeleteDatabase(database)"/>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        }
    }
    else
    {
        <div class="alert alert-warning">
            <TL>No databases found for this website</TL>
        </div>
    }
</LazyLoader>

@code
{
    [CascadingParameter]
    public Website CurrentWebsite { get; set; }

    private LazyLoader LazyLoader;
    private Database[] Databases;
    private DatabaseServer DatabaseServer;
    private string Host;

    private DatabaseDataModel Model = new();

    private async Task Load(LazyLoader arg)
    {
        Databases = await WebsiteService.GetDatabases(CurrentWebsite);

        if (Databases.Any())
        {
            DatabaseServer = (await WebsiteService.GetDefaultDatabaseServer(CurrentWebsite))!;
            Host = await WebsiteService.GetHost(CurrentWebsite);
        }
    }

    private async Task OnValidSubmit()
    {
        await WebsiteService.CreateDatabase(CurrentWebsite, Model.Name, Model.Password);
        Model = new();
        await LazyLoader.Reload();
    }

    private async Task DeleteDatabase(Database database)
    {
        await WebsiteService.DeleteDatabase(CurrentWebsite, database);
        await LazyLoader.Reload();
    }
}