@inject NavigationManager navigator
@inject ShogiApi Api

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

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

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

	<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 {
	private bool isExpanded = false;

	async Task CreateSession()
	{
		var sessionId = await Api.PostSession();
		if (!string.IsNullOrEmpty(sessionId))
		{
			navigator.NavigateTo($"play/{sessionId}");
		}
	}

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