@using LucideBlazor
@using MoonlightServers.Shared.Admin.Templates
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Tabels

@inherits Editor<List<MoonlightServers.Shared.Admin.Templates.UpdateConfigurationFileMappingDto>>

<div class="rounded-md bg-card shadow-sm border">
    <Table>
        <TableHeader>
            <TableRow>
                <TableHead>
                    Key
                </TableHead>
                <TableHead>
                    Value
                </TableHead>
                <TableHead ClassName="w-10"/>
            </TableRow>
        </TableHeader>
        <TableBody>
            @foreach (var mapping in Value)
            {
                <TableRow @key="mapping">
                    <TableCell>
                        <TextInputField @bind-Value="mapping.Key"
                                        placeholder="server-port"/>
                    </TableCell>
                    <TableCell>
                        <TextInputField @bind-Value="mapping.Value"
                                        placeholder="{{SERVER_PORT}}"/>
                    </TableCell>
                    <TableCell ClassName="text-right pr-4">
                        <Button @onclick="() => DeleteAsync(mapping)"
                                Size="ButtonSize.Icon"
                                Variant="ButtonVariant.Destructive">
                            <Trash2Icon/>
                        </Button>
                    </TableCell>
                </TableRow>
            }
            <TableRow>
                <TableCell colspan="999999">
                    <div class="flex justify-end">
                        <Button
                            @onclick="AddAsync"
                            Variant="ButtonVariant.Outline"
                            Size="ButtonSize.Sm">
                            <PlusIcon/>
                            Add Mapping
                        </Button>
                    </div>
                </TableCell>
            </TableRow>
        </TableBody>
    </Table>
</div>

@code
{
    private async Task DeleteAsync(UpdateConfigurationFileMappingDto mappingDto)
    {
        Value.Remove(mappingDto);
        await ValueChanged.InvokeAsync(Value);
    }

    private async Task AddAsync()
    {
        Value.Add(new UpdateConfigurationFileMappingDto()
        {
            Key = "Change me",
            Value = "{{CHANGE_ME}}"
        });

        await ValueChanged.InvokeAsync(Value);
    }
}