<script>
	import VersionCard from './VersionCard.svelte';
	import TemplateCard from './TemplateCard.svelte';

	import { send, receive } from '$lib/transition.js';
	import { flip } from 'svelte/animate';
	import { selectedVersionStore } from '$lib/library.js';
	import { Splitpanes, Pane } from 'svelte-splitpanes';

	let selectedVersion = $state(null);

	selectedVersionStore.subscribe((version) => {
		selectedVersion = version;
	});

	let { installedVersions } = $props();
	import '@webtui/css/base.css';
	import '@webtui/css/utils/box.css';
	import Dropzone from './Dropzone.svelte';
	import { fade } from 'svelte/transition';

	let favourites = $derived(installedVersions?.filter((v) => v.favourite) || []);
	let installed = $derived(installedVersions?.filter((v) => !v.favourite) || []);
</script>

<Splitpanes id="split">
	<Pane>
		<h2>Favourites</h2>

		<div id="container">
			<div id="library">
				{#if favourites.length}
					{#each favourites as version (version.version)}
						<div
							animate:flip={{ duration: 200 }}
							in:receive={{ key: version.version }}
							out:send={{ key: version.version }}
						>
							<VersionCard {version} {selectedVersion} />
						</div>
					{/each}
				{:else}
					<p class="minor">No favourites</p>
				{/if}
			</div>
		</div>

		<h2>Installed</h2>
		<div id="container">
			<div id="library">
				{#each installed as version (version.version)}
					<div
						animate:flip={{ duration: 200 }}
						in:receive={{ key: version.version }}
						out:send={{ key: version.version }}
					>
						<VersionCard {version} {selectedVersion} />
					</div>
				{/each}
			</div>
		</div>
	</Pane>
	<Pane>
		<div id="templates">
			{#if selectedVersion}
				<h2>Blender {selectedVersion.version}</h2>
				<TemplateCard template={null} version={selectedVersion} />
				{#if selectedVersion?.templates.length > 0}
					{#each selectedVersion?.templates as template (template)}
						<div>
							<TemplateCard {template} version={selectedVersion} />
						</div>
					{/each}
				{:else}
					<p class="minor">No templates</p>
				{/if}
				<Dropzone version={selectedVersion}></Dropzone>
			{/if}
		</div>
	</Pane>
</Splitpanes>

<style>
	.minor {
		color: var(--light-accent);
	}
	h2 {
		font-weight: normal;
		margin-bottom: 1rem;
	}
	#container {
		max-height: 100%;
		box-sizing: border-box;
	}
	#templates {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		padding: 0 0 0 1rem;
	}
	#library {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		width: 100%;
		padding-bottom: 1rem;
		overflow: visible;
	}
	:global(.splitpanes__pane) {
		background-color: unset !important;
	}
	:global(.splitpanes__splitter) {
		background-color: var(--light) !important;
		width: 0.5rem !important;
		border: none !important;
		border-radius: 1rem;
	}
</style>
