@* Recursive editor row for one folder in the visual builder. *@
@using SharepointToolbox.Web.Core.Models
@inject TranslationSource T

<div class="folder-node" style="margin-left:@(Depth > 1 ? "18px" : "0")">
    <div class="flex-row" style="gap:6px">
        <span class="text-muted" style="font-family:monospace">📁</span>
        <input class="form-input" style="width:auto;flex:1;min-width:160px"
               placeholder="@T["foldertree.ph.name"]" value="@Node.Name"
               @oninput="OnNameInput" />
        @if (Depth < FolderNode.MaxDepth)
        {
            <button class="btn btn-secondary btn-sm" type="button" @onclick="AddChild" title="@T["foldertree.btn.addsub.tooltip"]">@T["foldertree.btn.addsub"]</button>
        }
        <button class="btn btn-danger btn-sm" type="button" @onclick="() => OnRemove.InvokeAsync(Node)" title="@T["foldertree.btn.remove.tooltip"]">✕</button>
    </div>

    @foreach (var child in Node.Children)
    {
        <FolderTreeNode Node="child" Depth="Depth + 1" OnRemove="RemoveChild" OnChanged="OnChanged" />
    }
</div>

@code {
    [Parameter, EditorRequired] public FolderNode Node { get; set; } = default!;
    [Parameter] public int Depth { get; set; } = 1;
    [Parameter] public EventCallback<FolderNode> OnRemove { get; set; }
    [Parameter] public EventCallback OnChanged { get; set; }

    private async Task OnNameInput(ChangeEventArgs e)
    {
        Node.Name = e.Value?.ToString() ?? string.Empty;
        await OnChanged.InvokeAsync();
    }

    private async Task AddChild()
    {
        Node.Children.Add(new FolderNode());
        await OnChanged.InvokeAsync();
    }

    private async Task RemoveChild(FolderNode child)
    {
        Node.Children.Remove(child);
        await OnChanged.InvokeAsync();
    }
}