<script lang="ts">
  import {GetModpacks, GetModpack} from '../wailsjs/go/main/ModpackManager.js'
	import {InstallVanilla, LaunchInstance, GetInstances, CheckUpdate} from '../wailsjs/go/main/InstanceManager.js'
	import {GetVersions} from '../wailsjs/go/main/App.js'
	import {GetFabricVersions} from '../wailsjs/go/main/Fabric.js'
	import {onMount} from 'svelte'
	import {loading} from './global.ts'
	import {slide} from 'svelte/transition'

  let modpacks: string[] = []
	let pack: string
	let instances: Instance[] = []
	let instance: string
	let addingInstance: boolean = false
	let name: string = "New Modpack"
	let loader: string = "none"
	let fabric_ver: string = ""
	let fab_versions: string[] = []

	function updateLists(){
		GetVersions().then((result) => {
				modpacks = result
				pack = modpacks[0]
				name = modpacks[0]
				updateLoaders()
		})
		GetInstances().then((result) => {
			instances = result
			instance = instances[0].InstanceName
		})
		}

	function updateLoaders(){
		GetFabricVersions(pack).then((result) => {
			result.forEach((ver) => {
				fab_versions.push(ver.Loader.Version)
			})
			fabric_ver = fab_versions[0]
		})
	}

  onMount(() => {
		updateLists()
	})

	function onclick(event) {
		$loading = true
		LaunchInstance(instance).then(() => {
			$loading = false
		})
	}

	function install(){
		$loading = true
		InstallVanilla(pack, name).then(() => {
			addingInstance = false
			$loading = false
			updateLists()
		})
	}

	function onchange(event){
		name = event.target.value
		pack = event.target.value
		updateLoaders()
	}


</script>

<main>
  <select bind:value={instance} name="pack">Select a Modpack: 
		{#each instances as instance}
				<option value={instance.InstanceName}>{instance.InstanceName}</option>
		{/each}
  </select>
	<button on:click={onclick}>Launch</button>
	<br/>
	{#if addingInstance}
		<div transition:slide="{{duration:300}}">
			<select id="pack" on:change={onchange} bind:value={pack} name="pack">Select a Modpack: 
				{#each modpacks as pack}
					<option value={pack}>{pack}</option>
				{/each}
			</select>
			<input type="radio" bind:group={loader} checked id="noLoader" name="Loader" value="none" />
			<label for="noLoader">None</label>
			<input type="radio" bind:group={loader} id="fabric" name="Loader" value="fabric" />
			<label for="fabric">Fabric</label>
			<input type="radio" bind:group={loader} id="forge" name="Loader" value="forge" />
			<label for="forge">Forge</label>
			<input type="radio" bind:group={loader} id="neoforge" name="Loader" value="neoforge" />
			<label for="neoforge">NeoForge</label>
			<input type="radio" bind:group={loader} id="quilt" name="Loader" value="quilt" />
			<label for="quilt">Quilt</label>
			<br/>
			<input bind:value={name} />
			{#if loader == "fabric"}
				<select id="fabric_ver" bind:value={fabric_ver} name="fabric_ver">Select Fabric Version:
					{#each fab_versions as ver}
						<option value={ver}>{ver}</option>
					{/each}
				</select>
			{/if}
			<br/>
			<button on:click={install}>Install</button>
			<button on:click={() => {addingInstance = false}}>Cancel</button>
		</div>
	{:else}
		<button on:click={() => {addingInstance = true}}>Add Instance</button>
	{/if}
</main>

<style>
</style>
