@using MoonCore.Blazor.FlyonUi.Components
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Shared.Models

@inherits MoonCore.Blazor.FlyonUi.Modals.BaseModal

<div class="p-5">
    <div class="flex items-center gap-4">
        <div class="avatar avatar-placeholder max-sm:hidden">
            <div class="border-base-content/20 rounded-box w-13 border-1">
                <span class="icon-braces text-xl"></span>
            </div>
        </div>
        <div class="space-y-1">
            <h3 class="text-base-content text-2xl font-semibold">Add a parse configuration</h3>
            <p class="text-base-content/80">Add a new parse configuration to the star</p>
        </div>
    </div>
    <div class="mt-5">
        <HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
            <div class="mt-2">
                <label class="label-text">File</label>
                <input class="input" @bind="Form.File" type="text"/>
            </div>
            <div class="mt-2">
                <label class="label-text">Parser</label>
                <select @bind="Form.Parser" class="select w-full">
                    @foreach (var val in Enum.GetValues<FileParsers>())
                    {
                        <option value="@val">@val</option>
                    }
                </select>
            </div>
            <div class="mt-2">
                <button type="button" @onclick="AddEntryAsync" class="btn btn-primary w-full">Add entry</button>
            </div>
            
            @foreach (var entry in Form.Entries)
            {
                <div class="flex flex-row mt-2">
                    <input @bind="entry.Key" placeholder="Key" class="input placeholder-base-content/50 grow rounded-r-none"/>
                    <input @bind="entry.Value" placeholder="Value" class="input placeholder-base-content/50 grow rounded-none"/>
                    <button type="button" @onclick="() => RemoveEntryAsync(entry)" class="btn btn-error grow-0 rounded-l-none">
                        <i class="icon-x"></i>
                    </button>
                </div>
            }
        </HandleForm>
    </div>
    <div class="mt-5 flex justify-end">
        <button @onclick="HideAsync" type="button" class="btn btn-secondary me-2">
            Cancel
        </button>
        <WButton OnClick="SubmitAsync">
            Create
        </WButton>
    </div>
</div>

@code
{
    [Parameter] public Func<ParseConfiguration, Task> OnSubmit { get; set; }

    private ParseConfiguration Form = new();
    private HandleForm HandleForm;

    private async Task OnValidSubmit()
    {
        await OnSubmit.Invoke(Form);
        await HideAsync();
    }

    private Task SubmitAsync() => HandleForm.SubmitAsync();

    private async Task AddEntryAsync()
    {
        Form.Entries.Add(new());
        await InvokeAsync(StateHasChanged);
    }

    private async Task RemoveEntryAsync(ParseConfiguration.ParseConfigurationEntry entry)
    {
        Form.Entries.Remove(entry);
        await InvokeAsync(StateHasChanged);
    }
}