<script>
	import {Meteor} from "meteor/meteor";
	import {onMount} from "svelte";
	import {Sites} from "../../api/sites";
	import GridTable from "./../GridTable.svelte";
	import {writable} from "svelte/store";
	import TextField from '@smui/textfield';
	import HelperText from '@smui/textfield/helper-text';
	import {Students} from "../../api/students";
	import Select, { Option } from '@smui/select';
	import Dialog, { Title, Content, Actions } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import {Staff} from "/imports/api/staff";
	import List, {Item, Graphic, Meta, Text, PrimaryText, SecondaryText} from '@smui/list';

	onMount(async () => {
		Meteor.subscribe('sites');
	});
	// Load the sites (reactive).
	let sites = Sites.find({});
	let selectedSiteId;
	let assignees;
	let siteSelectComponent;
	let categories = ['Student', 'Staff'];
	let selectedCategory = 'Student';
	$: {
		if(selectedSiteId) {
			if(selectedCategory === 'Student') {
				Meteor.subscribe('students', selectedSiteId);
				assignees = Students.find({siteId: selectedSiteId});
			}
			else if(selectedCategory === 'Staff') {
				Meteor.subscribe('staff', selectedSiteId);
				assignees = Staff.find({siteId: selectedSiteId});
			}
		}
	}
	let selectedAssignee;
</script>

<div class="container">
	<h1>Assign Assets</h1>

	<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
		{#each $sites as site}
			<Option value={site._id}>{site.name}</Option>
		{/each}
	</Select>
	
	<Select bind:value={selectedCategory} label="Category">
		{#each categories as category}
			<Option value={category}>{category}</Option>
		{/each}
	</Select>
	
	<List twoLine singleSelection>
		{#if $assignees}
			{#each $assignees as assignee}
				<Item on:SMUI:action={() => (selectedAssignee = assignee)} selected={selectedAssignee === assignee}>
					<Text>
						<PrimaryText>{assignee.firstName} {assignee.lastName}</PrimaryText>
						<SecondaryText>{assignee.grade}</SecondaryText>
					</Text>
				</Item>
			{/each}
		{/if}
	</List>
</div>

<style>
	
</style>