<script>
	import {Assets} from "/imports/api/assets";
	import {AssetTypes} from "/imports/api/asset-types";
	import {onMount} from "svelte";
	import {Meteor} from "meteor/meteor";
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import {useTracker} from 'meteor/rdb:svelte-meteor-data';

	const dispatch = createEventDispatcher();

	export let person;
	
	onMount(async () => {
		//Meteor.subscribe('assetsAssignedTo', person._id);
		Meteor.subscribe('assets');
		Meteor.subscribe('assetTypes');
	});
	
	let assignedAssets;
	//$: assignedAssets = useTracker(() => Assets.find({assigneeId: person._id}).fetch());
	$m: assignedAssets = Assets.find({assigneeId: person._id}).fetch();
	$m: {
		//assignedAssets = Assets.find({}).fetch();
		for (next of assignedAssets) {
			next.type = AssetTypes.findOne({_id: next.assetTypeId})
		}
	}
	
	let unassign = (asset) => {
		dispatch('unassign', asset);
	}
</script>

{#each assignedAssets as asset}
	<div class="asset">
		Type: {asset.type.name}<br/>
		AssetId: {asset.assetId}<br/>
		Serial: {asset.serial}<br/>
		Assignee ID: {asset.assigneeId}<br/>
		<Button variant="raised" color="secondary" touch on:click={() => {unassign(asset)}}>
			<Label style="color: white">Unassign</Label>
		</Button>
	</div>
{/each}