<script lang="ts">
	import {InstallVanilla, LaunchInstance, GetInstances, InstallForge, InstallQuilt, InstallFabric, CheckUpdate} from '../wailsjs/go/main/InstanceManager.js'
	import {GetVersions} from '../wailsjs/go/main/App.js'
	import {GetFabricVersions} from '../wailsjs/go/main/Fabric.js'
	import {GetQuiltVersions} from '../wailsjs/go/main/Quilt.js'
	import {GetForgeVersions} from '../wailsjs/go/main/Forge.js'
	import {onMount} from 'svelte'
	import {loading, addingInstance} from './global'
	import {slide} from 'svelte/transition'
  	let modpacks: string[] = []
	let pack: string
	//let instances: Instance[] = []
	export let UpdateInstances
	let name: string = "New Modpack"
	let loader: string = "none"
	let fabric_ver: string = ""
	let fab_versions: string[] = []
	let quilt_ver: string = ""
	let quilt_versions: string[] = []
	let forge_ver: string = ""
	let forge_versions: string[] = []

	function updateLists(){
		GetVersions().then((result) => {
				modpacks = result
				pack = modpacks[0]
				name = modpacks[0]
				updateLoaders()
		})
		UpdateInstances()
	}

	function updateLoaders(){
		GetFabricVersions(pack).then((result) => {
			fab_versions = []
			result.forEach((ver) => {
				fab_versions.push(ver.Loader.Version)
			})
			fabric_ver = fab_versions[0]
		})
		GetQuiltVersions(pack).then((result) => {
			quilt_versions = []
			result.forEach((ver) => {
				quilt_versions.push(ver.Loader.Version)
			})
			quilt_ver = quilt_versions[0]
		})
		GetForgeVersions(pack).then((result) => {
			forge_versions = []
			result.forEach((ver) => {
				forge_versions.push(ver.Version)
			})
			forge_ver = forge_versions[0]
		}).catch(() => { forge_versions = []; forge_ver = "" })
		
	
	}

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

	function install(){
		$loading = true
		InstallVanilla(pack, name).then(() => {
			switch (loader){
			case "none":
				$addingInstance = false
				$loading = false
				updateLists()
			break
			case "fabric":
				InstallFabric(name, fabric_ver).then(() => {
					$addingInstance = false
					$loading = false
					updateLists()
				})
			break
			case "quilt":
				InstallQuilt(name, quilt_ver).then(() => {
					$addingInstance = false
					$loading = false
					updateLists()
				})
			case "forge":
				InstallForge(name, forge_ver).then(() => {
					$addingInstance = false
					$loading = false
					updateLists()
				})
			break
			}
		})
	}

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


</script>

<main>
	<div class=header>New Instance</div>	
	<br/>
		<div class=container>
		<div class=version-container>
			{#each modpacks as modpack}
                    <div class="input-container" id=input-container>
                        <input id={modpack} type="radio" bind:group={pack} on:change={onchange} name="radio" value={modpack}>
                        <div class="radio-tile">
                        <!--icon goes here later-->
                            <label for={modpack}>{modpack}</label>
                        </div>
                    </div>
                {/each}
		</div>
		<div class=loader-options>
			<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>
			{:else if loader == "quilt"}
				<select id="quilt_ver" bind:value={quilt_ver} name="quilt_ver">Select Quilt Version:
					{#each quilt_versions as ver}
						<option value={ver}>{ver}</option>
					{/each}
				</select>
			{:else if loader == "forge"}
				<select id="forge_ver" bind:value={forge_ver} name="forge_ver">Select Forge Version:
					{#each forge_versions as ver}
						<option value={ver}>{ver}</option>
					{/each}
				</select>
			{/if}
		</div>
		</div>
		<div transition:slide="{{duration:300}}">
			
			
			<br/>
			<button on:click={install}>Install</button>
			<button on:click={() => {$addingInstance = false}}>Cancel</button>
		</div>
</main>

<style>
	main{
		margin-top: 1rem;
		margin-left: 3rem;
		display: flex;
		flex-direction: column;
		--text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-secondary: #2c2c33;
		--bg-primary: #141418;
	}
	.container{
		display: flex;
		flex-direction: row;
		justify-content: center;
		max-height: 100%;
	} 
	.version-container{
		display: flex;
		flex-direction: column;
		max-height: 30rem;
		flex-shrink: 0;
		min-height: 0;
		max-width: 20rem;
		overflow-y: scroll;
		scrollbar-color: var(--text-secondary) var(--bg-secondary);
		overflow-x: hidden;
	}
	.input-container{
		display: flex;
	}
	#pack{
		display: flex;
		max-width: 10rem;
	}
</style>
