@inherits DComponentBase

@* A collapsible submenu of a DMenu: <li><details><summary>. The open state lives in C# (@bind-IsOpen): <details>
   renders open from IsOpen, and the summary's click toggles IsOpen with the native toggle prevented, so the browser
   and Blazor never fight over it. Escape closes the innermost open one (keydown stops bubbling while it is open). *@
<li @attributes="AdditionalAttributes" class="@Cx(Disabled ? "menu-disabled" : null, Class)">
	<details open="@IsOpen" @onkeydown="OnKeyDown" @onkeydown:stopPropagation="IsOpen">
		<summary class="@HeaderClass" aria-label="@(IsOpen ? BackText : null)" @onclick="Toggle" @onclick:preventDefault="true">
			@Header
		</summary>
		<ul class="@ContentClass">
			@ChildContent
		</ul>
	</details>
</li>

@code {
	[Parameter] public RenderFragment Header { get; set; }
	[Parameter] public RenderFragment ChildContent { get; set; }
	[Parameter] public bool IsOpen { get; set; }
	[Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
	[Parameter] public bool Disabled { get; set; }
	/// <summary>
	/// In a paged menu (DMenu Paged) the open summary turns into a back button reading "Back"; this replaces that text.
	/// It is set as the summary's aria-label while open, which is where daisyUI reads it from.
	/// </summary>
	[Parameter] public string BackText { get; set; }
	[Parameter] public string HeaderClass { get; set; }
	[Parameter] public string ContentClass { get; set; }

	async Task Toggle()
	{
		if (Disabled)
			return;
		IsOpen = !IsOpen;
		await IsOpenChanged.InvokeAsync(IsOpen);
	}

	async Task OnKeyDown(KeyboardEventArgs e)
	{
		if (e.Key != "Escape" || !IsOpen)
			return;
		IsOpen = false;
		await IsOpenChanged.InvokeAsync(false);
	}
}