<svelte:options immutable={true}/>
<svelte:window bind:online={online}/>

<script>
	import {logout_user} from "$app/lib/services/user-service";
	import Router from "svelte-spa-router";
	import {wrap} from "svelte-spa-router/wrap";
	import {QueryClient, QueryClientProvider} from "@sveltestack/svelte-query";
	import {is_active} from "$shared/lib/session";
	import UiWorkbench from "$app/pages/ui-workbench.svelte";
	import NotFound from "$app/pages/not-found.svelte";
	import Home from "$app/pages/home.svelte";
	import Settings from "$app/pages/settings.svelte";
	import Data from "$app/pages/data.svelte";
	import PreHeader from "$shared/components/pre-header.svelte";

	let online = true;

	async function user_is_logged_in() {
		if (!await is_active()) {
			await logout_user("expired");
		}
		return true;
	}

	const queryClient = new QueryClient();

	
	const routes = {
		"/home": wrap({
			component: Home,
			conditions: [user_is_logged_in],
		}),
		"/": wrap({
			component: Home,
			conditions: [user_is_logged_in],
		}),
		"/settings": wrap({
			component: Settings,
			conditions: [user_is_logged_in],
		}),
		"/data": wrap({
			component: Data,
			conditions: [user_is_logged_in],
		}),
		"/ui-workbench": UiWorkbench,
		"*": NotFound,
	};
</script>
<PreHeader show="{!online}">You seem to be offline, please check your internet connection.</PreHeader>
<QueryClientProvider client={queryClient}>
    <Router
            {routes}
            restoreScrollState={true}
            on:routeLoading={() => {
            document.getElementById("loader").style.display = "inline-block";
        }}
            on:routeLoaded={() => {
            document.getElementById("loader").style.display = "none";
        }}
    />
</QueryClientProvider>
