@page "/styleguide"
@using decePubClient.Components.Styleguide
@implements IDisposable

@* Every daisyUI wrapper (Components/Daisy) in every theme, to check them and the neo overrides (Styles/neo.css) by eye.
   Not linked from the app. The theme picker only previews: it applies a throwaway PageSettings, and choosing Saved or
   leaving the page restores the saved ones. *@
<Title>Styleguide</Title>

<div class="flex flex-col gap-10 pb-10">

	<header class="sticky top-0 z-40 flex flex-wrap items-center gap-4 rounded-box bg-base-100 p-4 neo-raised">
		<h1 class="text-xl font-bold">Styleguide</h1>
		<DSelect TValue="PreviewTheme" class="w-auto" @bind-Value="theme" @bind-Value:after="Apply">
			@foreach (var previewTheme in Enum.GetValues<PreviewTheme>())
			{
				<option value="@previewTheme">@previewTheme</option>
			}
		</DSelect>
		<DRange TValue="short" class="neo-hue-track w-64" Min="0" Max="359" Immediate="true" @bind-Value="hue" @bind-Value:after="Apply" />
		<span class="text-sm opacity-70">hue @hue</span>
	</header>

	<h2 class="text-2xl font-bold">Actions</h2>
	<ActionsSection />

	<h2 class="text-2xl font-bold">Data display</h2>
	<DataDisplaySection />

	<h2 class="text-2xl font-bold">Navigation</h2>
	<NavigationSection />

	<h2 class="text-2xl font-bold">Feedback</h2>
	<FeedbackSection />

	<h2 class="text-2xl font-bold">Data input</h2>
	<DataInputSection />

	<h2 class="text-2xl font-bold">Layout</h2>
	<LayoutSection />

	<h2 class="text-2xl font-bold">Mockup</h2>
	<MockupSection />

</div>

@code {
	enum PreviewTheme
	{
		Saved,
		Light,
		Dark,
		LightGrey,
		DarkGrey,
		System
	}

	[CascadingParameter] CascadingState CascadingState { get; set; }

	PreviewTheme theme = PreviewTheme.Saved;
	short hue = 25;

	void Apply() => CascadingState.Status.ApplyTheme(theme is PreviewTheme.Saved ? CascadingState.PublicCacheData.PageSettings : new PageSettings
	{
		PreferSystemTheming = theme is PreviewTheme.System,
		ThemeIsDarkMode = theme is PreviewTheme.Dark,
		ThemeIsLightGray = theme is PreviewTheme.LightGrey,
		ThemeIsDarkGray = theme is PreviewTheme.DarkGrey,
		LightThemeIndexColour = hue,
		DarkThemeIndexColour = hue
	});

	public void Dispose() => CascadingState.Status.ApplyTheme(CascadingState.PublicCacheData.PageSettings);
}