@inject NavigationManager navigator
@inject ShogiService Service

@* Desktop view *@
<nav class="NavMenu PrimaryTheme ThemeVariant--Contrast">
	<a href="">Home</a>

	<a href="search">Search</a>

	<AuthorizeView>
		<button class="href" @onclick="CreateSession">Create</button>
	</AuthorizeView>

	<h1>Shogi</h1>
	@* <div class="spacer" /> *@

	<AuthorizeView>
		<Authorized>
			<span>@context.User.Identity?.Name</span>
			<a href="logout">Logout</a>
		</Authorized>
		<NotAuthorized>
			<a href="login">Login</a>
			<a href="register">Register</a>
		</NotAuthorized>
	</AuthorizeView>
</nav>

@* Mobile view *@
<nav class="NavMenu PrimaryTheme ThemeVariant--Contrast compact">
	<div class="flex">
		<h1>Shogi</h1>
		<AuthorizeView>
			<span>@context.User.Identity?.Name</span>
		</AuthorizeView>
		<button class="href" @onclick="() => isExpanded = !isExpanded">
			@(isExpanded ? "Collapse" : "Expand")
		</button>
	</div>

	<div class="drop-down @ExpandedCss">
		<ul>
			<li>
				<a href="">Home</a>
			</li>
			<li>
				<a href="search">Search</a>
			</li>
			<AuthorizeView>
				<Authorized>

					<li>
						<button class="href" @onclick="CreateSession">Create</button>
					</li>
					<li>
						<a href="logout">Logout</a>
					</li>
				</Authorized>
				<NotAuthorized>
					<li>
						<a href="login">Login</a>
					</li>
					<li>
						<a href="register">Register</a>
					</li>
				</NotAuthorized>
			</AuthorizeView>
		</ul>
	</div>

</nav>

@code {
	[CascadingParameter]
	private Task<AuthenticationState> AuthState { get; set; } = default!;

	private bool isExpanded = false;

	async Task CreateSession()
	{
		var state = await AuthState;
		var userId = state.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
		if (userId is null) return;

		var sessionId = await Service.CreateSession(userId);
		if (sessionId.HasValue)
		{
			navigator.NavigateTo($"play/{sessionId.Value}");
		}
	}

	string ExpandedCss => isExpanded ? "expand" : string.Empty;
}