<script lang="ts">
	import { browser } from '$app/environment';
	import { boredState } from '$lib/stores/boredState';
	import { wishlistStore } from '$lib/stores/wishlistStore';
	import { ToastType } from '$lib/types';
	// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
	import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte';
	import { toast } from '../toast/toast';

	function saveWishlist() {
	if (!browser) return
	localStorage.wishlist = JSON.stringify($wishlistStore)
	toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO })
}

function exportWishlist() {
	if (!browser) return
	const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
		type: 'application/json;charset=utf-8',
	})
	let url = window.URL || window.webkitURL
	let link = url.createObjectURL(wishlistBlob)
	let a = document.createElement('a')
	a.setAttribute('download', `wishlist.json`)
	a.setAttribute('href', link)
	a.click()
	document.body.removeChild(a)
	toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO })
}

function clearWishlist() {
	if ($wishlistStore.length > 0) {
		boredState.update((n) => ({
			...n,
			dialog: { isOpen: true, content: ClearWishlistDialog },
		}))
	} else {
		toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR })
	}
}
</script>

<div>
	<div>
		<span class="wishlist-title"
			><a href="/wishlist" title="Go to your wishlist">Your Wishlist</a></span
		>
	</div>
	<div class="wishlist-buttons">
		<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
			>
			<!-- <ShareIcon width="24" height="24" /> -->
			Export</button
		>
		<!-- <button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
			><SaveIcon width="24" height="24" />Save</button
		> -->
		<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
			<!-- <TrashIcon width="24" height="24" />Clear -->
		</button>
	</div>
</div>

<style lang="postcss">
	:global(.wishlist-title) {
		padding-bottom: var(--spacing-8);
		font-size: var(--font-24);
		font-weight: 700;
		line-height: 32px;
	}

	:global(.wishlist-buttons) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// gap: 6rem;

		@media (min-width: 480px) {
			gap: 3rem;
		}
	}

	button {
		display: grid;
		place-items: center;
		gap: 0.25rem;
	}
</style>
