<script lang="ts">
  import logo from './assets/images/fc-logo.png'
  import Instances from './Instances.svelte'
	import Loading from './Loading.svelte'
	import Modpacks from './Modpacks.svelte'
  import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
	import { onMount } from 'svelte'
	import { loading, currentPage, instances, themecolor } from './global'
	import { slide } from 'svelte/transition'
    import Navbar from './Navbar.svelte'
	import Instancepage from './Instancepage.svelte'
    import { set_attributes, set_style } from 'svelte/internal';
	import {GetInstances} from '../wailsjs/go/main/InstanceManager.js'
    import Settingspage from './Settingspage.svelte';

	let width: number = 10
	let navMargin = document.getElementById("body") as HTMLElement;
	let r

	function UpdateInstances() {
		$loading = true
		GetInstances().then((result) => {
			$instances = result
			$loading = false
		})
	}
	 	
		onMount(() => {
			CheckPrerequisites().then(() => {
				UpdateInstances()
			})
			r = document.getElementById('wrapper');
		})
		function setMargin(){
			r.style.setProperty('--navMargin', '17rem');
		}
		function unsetMargin(){
			r.style.setProperty('--navMargin', '5rem');
		}

		function initialColor() {
			r.style.setProperty('--accent-color', 'purple');
		}
		function setcolor() {
			console.log("changing theme");
			r.style.setProperty('--accent-color', $themecolor);
		}


		window.document.onload = function() {setcolor()};


</script>

<main>
	<div id = "wrapper">
  <div class="navbar" on:mouseover={setMargin} on:focus={setMargin} on:mouseleave={unsetMargin} >
	<Navbar />
  </div>
  <body class="body" id="body">
	<!--<img alt="Wails logo" id="logo" src="{logo}">-->
	{#if $loading}
		<div transition:slide="{{duration:100}}" class="central">
			<Loading />
		</div>
	{:else if $currentPage == 1}
		<div transition:slide="{{duration:100}}" class="central">
  		<Instancepage on:change-theme = {setcolor} />
		</div>
	{:else if $currentPage == 2}
		<div transition:slide="{{duration:100}}" class="central">
  		<Instances UpdateInstances={UpdateInstances} />
		</div>
	{:else if $currentPage == 3}
		<div transition:slide="{{duration:100}}" class="central">
  		<Modpacks UpdateInstances={UpdateInstances} />
		</div>
		{:else if $currentPage == 4}
		<div transition:slide="{{duration:100}}" class="central">
  		<Settingspage on:change-theme = {setcolor} on:change-theme-back = {initialColor} />
		</div>
	{/if}
  	</body>	
	</div>
</main>

<style>
	:root{
		font-size: 16px;
		--text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-secondary: #2c2c33;
		--bg-primary: #141418;
		
		background-color: var(--bg-secondary);
		
	}
	#wrapper{
		--accent-color: purple;
		--navMargin: 5rem;
	}
	.navbar{
		z-index: 5;
	}

  #logo {
    display: flex;
    width: 70%;
    height: 70%;
    margin: auto;
    padding: 10% 0 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
  }

  body{
	display: flex;
	flex-direction: column;
	margin-left: var(--navMargin);
	transition: 200ms;
  }

  main{
	background-color: var(--bg-secondary);
  }
  .central{
	background-color: var(--bg-secondary);
  }



</style>
