<script{{#if typescript}} lang="ts"{{/if}}>
	import { onDestroy } from 'svelte';
	
	{{#if typescript}}
	import { defaultConfig } from '../../_standalone/{{componentName}}/config';
	{{else}}
	import { defaultConfig } from '../../_standalone/{{componentName}}/config.js';
	{{/if}}

	let validInstances{{#if typescript}}: Map<number, () => void>{{/if}} = new Map();

	const generateInstance = () => {
		const i = window.{{componentName}}.start(defaultConfig);

		validInstances = validInstances.set(Math.random() * 100, () => i.stop());
	};

	const removeInstance = (instance{{#if typescript}}: () => void, i: number{{/if}}) => {
		instance();

		validInstances.delete(i);
		validInstances = validInstances;
	};

	onDestroy(() => {
		validInstances.forEach((stop) => {
			stop();
		})
		validInstances.clear();
	})
</script>

<svelte:head>
	<script type="module" src="/src/_standalone/{{componentName}}/embed{{#if typescript}}.ts{{else}}.js{{/if}}"></script>
</svelte:head>

<main class="p-2">
	<button
		on:click={generateInstance}>init instance of {{componentName}}</button
	>
	<p>defaultConfig: {JSON.stringify(defaultConfig)}</p>
	{#each validInstances as [i, instance]}
		<div>
			<button
				on:click={() => removeInstance(instance, i)}>stop {i}</button
			>
		</div>
	{/each}
</main>
