<script lang="ts">
	import {onMount} from 'svelte'
    import {GetModpacks} from '../wailsjs/go/main/ModpackManager.js'
    import {ImportModpack} from '../wailsjs/go/main/InstanceManager.js'
    import { main } from '../wailsjs/go/models';
    import {loading} from './global.js'
    let modpacks: main.Modpack[] = []
    let pack: main.Modpack
    export let UpdateInstances
    let name: string = "New Modpack"
 
    onMount(() => {
        GetModpacks().then((result) => {
            modpacks = result
            pack = result[0]
            name = pack.Name
        })
    })

    function AddModpack(){
        $loading = true
        ImportModpack(pack, name).then(() => {
            UpdateInstances()
        })
    }

    function onchange(event){
		name = pack.Name
	}

</script>

<main>
    <select id="pack" bind:value={pack} on:change={onchange} name="pack">Select a Modpack: 
        {#each modpacks as pack}
            <option value={pack}>{pack.Name}</option>
        {/each}
    </select>
    <input bind:value={name} />
    <button on:click={AddModpack}>Add Modpack</button>
</main>