@if (PublicCacheData != null)
{
	if (PublicCacheData.PageSettings.ThemeIsDarkMode)
	{
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.DarkThemeIndexColour},16%,12%)")" Name="theme-color"/>
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.DarkThemeIndexColour},16%,12%)")" Name="background-color"/>
	}
	else
	{
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.LightThemeIndexColour},84%,88%)")" Name="theme-color"/>
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.LightThemeIndexColour},84%,88%)")" Name="background-color"/>
	}
}

<HeadContent>

	<style>
		@if (PublicCacheData != null)
		{
			var iconsColour = PublicCacheData.PageSettings.IconsThemeIndexColour is >= 0 and <= 359 ?
				$"--fa-primary-color: hsl({PublicCacheData.PageSettings.IconsThemeIndexColour},84%,26.4%);--fa-secondary-color: hsl({PublicCacheData.PageSettings.IconsThemeIndexColour},84%,66%);" :
				PublicCacheData.PageSettings.IconsThemeIndexColour is -2 ?
				$"--fa-primary-color: hsl(0,0%,1%);--fa-secondary-color: hsl(0,0%,40%);" : 
				$"--fa-primary-color: hsl(0,0%,60%);--fa-secondary-color: hsl(0,0%,99%);";
			@if (PublicCacheData.PageSettings.PreferSystemTheming)
			{
				if (PublicCacheData.PageSettings.ThemeIsDarkGray || PublicCacheData.PageSettings.ThemeIsLightGray)
				{
					@($@"@media screen and (prefers-color-scheme: light) {{
									:root {{
										--colour-index: 0;
										--background: hsl(0,0%,88%);
										--text-color: hsl(0,0%,26.4%);
										--placeholder-text-color: hsla(0,0%,26.4%,.4);
										--primary-color: hsl(0,0%,88%);
										--primary-color-light: hsl(0,0%,100%);
										--primary-color-dark: hsl(0,0%,66%);
										--primary-gradiend-light: hsl(0,0%,92%);
										--primary-gradiend-dark: hsl(0,0%,84%);
										--primary-gradiend-lighter: hsl(0,0%,96%);
										--primary-gradiend-darker: hsl(0,0%,80%);
										--light-shadow: hsla(0,0%,100%, .5);
										--dark-shadow: hsla(0,0%,66%, .5);
										--danger-gradiend-light: hsl(0,0%,92%);
										--danger-gradiend-dark: hsl(0,0%,84%);
										{iconsColour}
									}}
								}}
							
							@media screen and (prefers-color-scheme: dark) {{
									:root {{
										--colour-index: 0;
										--background: hsl(0,0%,12%); 
										--text-color: hsl(0,0%,73.6%); 
										--placeholder-text-color: hsla(0,0%,52.8%,.4);
										--primary-color: hsl(0,0%,12%); 
										--primary-color-light: hsl(0,0%,100%); 
										--primary-color-dark: hsl(0,0%,33%); 
										--primary-gradiend-light: hsl(0,0%,16%); 
										--primary-gradiend-dark: hsl(0,0%,8%); 
										--primary-gradiend-lighter: hsl(0,0%,20%); 
										--primary-gradiend-darker: hsl(0,0%,4%);
										--light-shadow: hsla(0,0%,66%,.1); 
										--dark-shadow: hsla(0,0%,1%,.5);
										--danger-gradiend-light: hsl(0,16%,16%);
										--danger-gradiend-dark: hsl(0,16%,8%);
										{iconsColour}
									}}
								}}")
				}
				else
				{
					@($@"@media screen and (prefers-color-scheme: light) {{
									:root {{
										--colour-index: {PublicCacheData.PageSettings.LightThemeIndexColour};
										--background: hsl(var(--colour-index,25),84%,88%);
										--text-color: hsl(var(--colour-index,25),84%,26.4%);
										--placeholder-text-color: hsla(var(--colour-index,25),84%,26.4%,.4);
										--primary-color: hsl(var(--colour-index,25),84%,88%);
										--primary-color-light: hsl(var(--colour-index,25),84%,100%);
										--primary-color-dark: hsl(var(--colour-index,25),84%,66%);
										--primary-gradiend-light: hsl(var(--colour-index,25),84%,92%);
										--primary-gradiend-dark: hsl(var(--colour-index,25),84%,84%);
										--primary-gradiend-lighter: hsl(var(--colour-index,25),84%,96%);
										--primary-gradiend-darker: hsl(var(--colour-index,25),84%,80%);
										--light-shadow: hsla(var(--colour-index,25),84%,100%, .5);
										--dark-shadow: hsla(var(--colour-index,25),84%,66%, .5);
										--danger-gradiend-light: hsl(0,84%,92%);
										--danger-gradiend-dark: hsl(0,84%,84%);
										{iconsColour}
									}}
								}}
							
							@media screen and (prefers-color-scheme: dark) {{
									:root {{
										--colour-index: {PublicCacheData.PageSettings.DarkThemeIndexColour};
										--background: hsl(var(--colour-index,215),16%,12%); 
										--text-color: hsl(var(--colour-index,215),16%,73.6%); 
										--placeholder-text-color: hsla(var(--colour-index,25),84%,26.4%,.4);
										--primary-color: hsl(var(--colour-index,215),16%,12%); 
										--primary-color-light: hsl(var(--colour-index,215),84%,100%); 
										--primary-color-dark: hsl(var(--colour-index,215),16%,33%); 
										--primary-gradiend-light: hsl(var(--colour-index,215),16%,16%); 
										--primary-gradiend-dark: hsl(var(--colour-index,215),16%,8%); 
										--primary-gradiend-lighter: hsl(var(--colour-index,215),16%,20%); 
										--primary-gradiend-darker: hsl(var(--colour-index,215),16%,4%);
										--light-shadow: hsla(var(--colour-index,215),84%,66%,.1); 
										--dark-shadow: hsla(var(--colour-index,215),16%,1%,.5);
										--danger-gradiend-light: hsl(0,16%,16%);
										--danger-gradiend-dark: hsl(0,16%,8%);
										{iconsColour}
									}}
								}}")
				}
			}
			else
			{
				if (PublicCacheData.PageSettings.ThemeIsDarkGray || PublicCacheData.PageSettings.ThemeIsLightGray)
				{
					if (PublicCacheData.PageSettings.ThemeIsDarkGray)
					{
						@($@":root{{--colour-index: 0;
									--background: hsl(0,0%,12%); 
									--text-color: hsl(0,0%,73.6%); 
									--placeholder-text-color: hsla(0,0%,73.6%,.4);
									--primary-color: hsl(0,0%,12%); 
									--primary-color-light: hsl(0,0%,100%); 
									--primary-color-dark: hsl(0,0%,33%); 
									--primary-gradiend-light: hsl(0,0%,16%); 
									--primary-gradiend-dark: hsl(0,0%,8%); 
									--primary-gradiend-lighter: hsl(0,0%,20%); 
									--primary-gradiend-darker: hsl(0,0%,4%);
									--light-shadow: hsla(0,0%,66%,.1); 
									--dark-shadow: hsla(0,0%,1%,.5);
									--danger-gradiend-light: hsl(0,16%,16%);
									--danger-gradiend-dark: hsl(0,16%,8%);{iconsColour}}}")
					}
					else
					{
						@($@":root{{--colour-index: 0;
								--background: hsl(0,0%,88%);
								--text-color: hsl(0,0%,26.4%);
								--placeholder-text-color: hsla(0,0%,26.4%,.4);
								--primary-color: hsl(0,0%,88%);
								--primary-color-light: hsl(0,0%,100%);
								--primary-color-dark: hsl(0,0%,66%);
								--primary-gradiend-light: hsl(0,0%,92%);
								--primary-gradiend-dark: hsl(0,0%,84%);
								--primary-gradiend-lighter: hsl(0,0%,96%);
								--primary-gradiend-darker: hsl(0,0%,80%);
								--light-shadow: hsla(0,0%,100%, .5);
								--dark-shadow: hsla(0,0%,66%, .5);
								--danger-gradiend-light: hsl(0,84%,92%);
								--danger-gradiend-dark: hsl(0,84%,84%);{iconsColour}}}")	
					}
				}
				else
				{
					if (PublicCacheData.PageSettings.ThemeIsDarkMode)
					{
						@($@":root{{--colour-index: {PublicCacheData.PageSettings.DarkThemeIndexColour};
								--background: hsl(var(--colour-index,215),16%,12%); 
								--text-color: hsl(var(--colour-index,215),16%,73.6%); 
								--placeholder-text-color: hsla(var(--colour-index,215),16%,73.6%,.4);
								--primary-color: hsl(var(--colour-index,215),16%,12%); 
								--primary-color-light: hsl(var(--colour-index,215),84%,100%); 
								--primary-color-dark: hsl(var(--colour-index,215),16%,33%); 
								--primary-gradiend-light: hsl(var(--colour-index,215),16%,16%); 
								--primary-gradiend-dark: hsl(var(--colour-index,215),16%,8%); 
								--primary-gradiend-lighter: hsl(var(--colour-index,215),16%,20%); 
								--primary-gradiend-darker: hsl(var(--colour-index,215),16%,4%);
								--light-shadow: hsla(var(--colour-index,215),84%,66%,.1); 
								--dark-shadow: hsla(var(--colour-index,215),16%,1%,.5);
								--danger-gradiend-light: hsl(0,16%,16%);
								--danger-gradiend-dark: hsl(0,16%,8%);{iconsColour}}}")
					}
					else
					{
						@($@":root{{--colour-index: {PublicCacheData.PageSettings.LightThemeIndexColour};
								--background: hsl(var(--colour-index,25),84%,88%);
								--text-color: hsl(var(--colour-index,25),84%,26.4%);
								--placeholder-text-color: hsla(var(--colour-index,25),84%,26.4%,.4);
								--primary-color: hsl(var(--colour-index,25),84%,88%);
								--primary-color-light: hsl(var(--colour-index,25),84%,100%);
								--primary-color-dark: hsl(var(--colour-index,25),84%,66%);
								--primary-gradiend-light: hsl(var(--colour-index,25),84%,92%);
								--primary-gradiend-dark: hsl(var(--colour-index,25),84%,84%);
								--primary-gradiend-lighter: hsl(var(--colour-index,25),84%,96%);
								--primary-gradiend-darker: hsl(var(--colour-index,25),84%,80%);
								--light-shadow: hsla(var(--colour-index,25),84%,100%, .5);
								--dark-shadow: hsla(var(--colour-index,25),84%,66%, .5);
								--danger-gradiend-light: hsl(0,84%,92%);
								--danger-gradiend-dark: hsl(0,84%,84%);{iconsColour}}}")	
					}
				}
			}
		}
	</style>

</HeadContent>

<CascadingValue IsFixed=false Value=this>
	@ChildContent
</CascadingValue>

@code {
	[Parameter] public RenderFragment ChildContent { get; set; }
	[Inject] IStorage DbStorage { get; set; }
	[Inject] ILocalStorageService Storage { get; set; }
	[Inject] IJSRuntime JS { get; set; }
	// [Inject] DataService DataService { get; set; }
	[Inject] public AppStatusService Status { get; set; }
	[Inject] ILogger<CascadingState> Logger { get; set; }

	public bool IsOnline { get; set; } = true;
	Timer IsOnlineTimer { get; set; }
	public PublicCacheData PublicCacheData { get; set; }
	public User User { get; set; }

	DotNetObjectReference<CascadingState> cascadingStateReference;

	protected override async Task OnInitializedAsync()
	{
		try
		{
			IsOnlineTimer = new Timer(async _ => await UpdateIsOnline(), new AutoResetEvent(false), 0, 10000);
			cascadingStateReference = DotNetObjectReference.Create(this);
			await JS.InvokeVoidAsync("cascadingStateInstanceReference", cascadingStateReference);
			PublicCacheData = await Storage.GetItemAsync<PublicCacheData>(nameof(PublicCacheData));
			if (PublicCacheData == null)
			{
				PublicCacheData = new();
				await UpdatePublicCache(PublicCacheData);
			}

			User = new();
		}
		catch (Exception ex)
		{
			Logger.LogError(ex, $"{nameof(CascadingState)}.{nameof(OnInitializedAsync)}");
		}
	}

	public async ValueTask UpdatePublicCache(PublicCacheData publicCacheData)
	{
		try
		{
			PublicCacheData = publicCacheData;
			await Storage.SetItemAsync(nameof(PublicCacheData), PublicCacheData);
			StateHasChanged();
		}
		catch (Exception ex)
		{
			Console.WriteLine($"{nameof(CascadingState)}.{nameof(UpdatePublicCache)}");
			Console.WriteLine(ex.ToString());
		}
	}

	[JSInvokable]
	public async Task LogFromJs(string message, string where)
	{
		try
		{
			await ProcessError(new(message), where);
		}
		catch (Exception ex)
		{
			Logger.LogError(ex, $"{nameof(CascadingState)}.{nameof(LogFromJs)}");
		}
	}

	async Task UpdateIsOnline()
	{
		try
		{
			var latestOnlineState = await Status.IsOnline();

	//var latestOnlineState = Random.Shared.Next() % 2 == 0;
			if (latestOnlineState != IsOnline)
			{
				IsOnline = latestOnlineState;
				StateHasChanged();
			}
	// else
	// {
	// 	var pingIsOnline = await DataService.Ping();
	// 	if (pingIsOnline != IsOnline)
	// 	{
	// 		IsOnline = pingIsOnline;
	// 		StateHasChanged();
	// 	}
	// }
		}
		catch (Exception ex)
		{
			Logger.LogError(ex, $"{nameof(CascadingState)}.{nameof(UpdateIsOnline)}");
		}
	}

	public async ValueTask ProcessError(Exception ex, string where)
	{
		try
		{
			await DbStorage.AddLog(ex, where);
			Logger.LogError(ex, where);
			await Task.Run(() => {
			});
		}
		catch (Exception exception)
		{
			Logger.LogError(exception, $"{nameof(CascadingState)}.{nameof(ProcessError)}");
		}
	}

	public async ValueTask ProcessWarning(string message, string where)
	{
		try
		{
			await DbStorage.AddLog(message, where);
			Logger.LogWarning("{where} - {message}", where, message);
			await Task.Run(() => {
			});
		}
		catch (Exception exception)
		{
			Logger.LogError(exception, $"{nameof(CascadingState)}.{nameof(ProcessWarning)}");
		}
	}
}