<script>
	import Popup from '$lib/components/Popup.svelte';
	import {
		deleteVersion,
		launchBlenderVersion,
		toggleFavourite,
		registerVersion,
		selectVersion
	} from '$lib/library';
	import Button from '$lib/components/Button.svelte';
	import Menu from '$lib/components/Menu.svelte';
	import { show } from '$lib/components/Dialog.svelte';

	let { version, selectedVersion } = $props();
	let popup = $state();

	let selected = $derived(version.version === selectedVersion?.version);

	async function handleDelete() {
		const prompt = await show({
			title: 'Delete',
			message: `This will remove Blender ${version.version} and all associated files from your system.`,
			buttons: ['Cancel', 'Continue'],
			type: 'warning'
		});
		if (prompt == 'Continue') {
			deleteVersion(version);
		}
	}

	async function handleDefault() {
		const prompt = await show({
			title: 'Set as Default',
			message: `This will make Blender ${version.version} the default version on your system.`,
			buttons: ['Cancel', 'Continue'],
			type: 'info'
		});
		if (prompt == 'Continue') {
			popup.pop(1500);
			registerVersion(version);
		}
	}
</script>

<Popup bind:this={popup} content="Version {version.version} is now the default on your system"
></Popup>
<div
	role="button"
	tabindex="0"
	onkeydown={() => {}}
	onclick={async () => {
		await selectVersion(version);
	}}
	id="card"
	class:selected
>
	<div class="row">
		{version.version}
		<Button style="iconbutton" onclick={() => toggleFavourite(version)}
			><svg
				xmlns="http://www.w3.org/2000/svg"
				width="16"
				height="16"
				class="fav-btn {version.favourite ? 'fav' : ''}"
				viewBox="0 0 16 16"
			>
				<path
					d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"
				/>
			</svg>
		</Button>
	</div>
	<div class="row">
		<Button onclick={() => launchBlenderVersion(version)}>Launch</Button>
		<Menu>
			{#snippet children({ close })}
				<button
					type="button"
					class="menu-item"
					onclick={async () => {
						await handleDelete();
						close();
					}}>Delete</button
				>
				<button
					type="button"
					class="menu-item"
					onclick={async () => {
						await handleDefault();
						close();
					}}>Default</button
				>
			{/snippet}
		</Menu>
	</div>
</div>

<style>
	#card {
		display: flex;
		flex-direction: column;
		position: relative;
		justify-content: space-between;
		aspect-ratio: 1 / 0.7;
		width: 100%;
		min-width: 170px;
		max-width: 200px;
		border-radius: 5px;
		background-color: var(--light);
		padding: 1rem;
	}
	#card.selected {
		background-color: var(--light-accent);
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#card:hover {
		outline: 2px solid var(--accent);
		outline-offset: -2px;
	}
	.fav-btn:hover {
		fill: var(--accent);
	}
	.fav-btn.fav {
		fill: var(--accent);
	}
	.menu-item {
		padding: 0.5rem 1rem;
		cursor: pointer;
		background: none;
		border: none;
		font-family: var(--font);
		font-size: 1rem;
		color: var(--black);
		text-align: left;
		width: 100%;
	}
	.menu-item:hover {
		background-color: var(--light-accent);
	}
</style>
