<script lang="ts">
	import '../app.css';
	import '$lib/eve';
	import AddressBar from '$lib/components/AddressBar.svelte';
	import { currentBackground, currentFontScale, currentTheme } from '$lib/stores/settings';
	import { backgroundOptions } from '$lib/backgrounds';
	import CCNSelector from '$lib/components/CCNSelector.svelte';

	import '$lib/components/PublicComponents/Loading.svelte';
	import '$lib/components/PublicComponents/Markdown.svelte';
	import '$lib/components/PublicComponents/RelativeTime.svelte';
	import '$lib/components/PublicComponents/ArxletSublink.svelte';
	import '$lib/components/PublicComponents/IconifyIcon.svelte';
	import '$lib/components/PublicComponents/LoggedInUserAvatar.svelte';
	import '$lib/components/PublicComponents/Title.svelte';
	import '$lib/components/PublicComponents/Reputation.svelte';
	import '$lib/components/PublicComponents/MarkdownEditor.svelte';
	import '$lib/components/PublicComponents/ReputationButton.svelte';

	import '$lib/components/User/Avatar.svelte';
	import '$lib/components/User/UserName.svelte';
	import Loading from '$lib/components/PublicComponents/Loading.svelte';
	import { goto } from '$app/navigation';

	let { children } = $props();

	let loading = $state(true);
	let isInOnboard = $state(false);

	$effect(() => {
		document.documentElement.setAttribute('data-theme', $currentTheme);
		document.documentElement.style.fontSize = `${$currentFontScale}%`;
	});

	const backgroundData = $derived(
		backgroundOptions.find((option) => option.id === $currentBackground)
	);

	window.eve.listCCNs().then((ccns) => {
		loading = false;
		if (ccns.length === 0) {
			isInOnboard = true;
			goto('/onboard');
		}
	});
</script>

<div class="absolute w-full">
	{#if loading}
		<Loading />
	{:else if isInOnboard}
		{@render children()}
	{:else}
		<div class="bg-fixed bg-cover" style="background-image: url({backgroundData?.image});">
			<AddressBar />
			<div class="flex flex-row h-[calc(100vh-4em)] w-full">
				<CCNSelector />
				<main class="overflow-auto bg-transparent w-full">
					{@render children()}
				</main>
			</div>
		</div>
	{/if}
</div>
