<script>
    import {Meteor} from "meteor/meteor";
    import {onMount} from "svelte";
    import {Sites} from "../../api/sites";
    import TextField from '@smui/textfield';
    import {Students} from "../../api/students";
    import Select, { Option } from '@smui/select';
    import {Staff} from "/imports/api/staff";
    import List, {Item, Graphic, Meta, Text, PrimaryText, SecondaryText} from '@smui/list';
    import Paper from '@smui/paper';
    import LayoutGrid, {Cell} from '@smui/layout-grid';
    import {Assets} from "/imports/api/assets";
    import {AssetTypes} from "/imports/api/asset-types";

    onMount(async () => {
	    Meteor.subscribe('students');
	    Meteor.subscribe('staff');
	    Meteor.subscribe('assets');
	    Meteor.subscribe('assetTypes');
    });
    let selectedSiteId;
    let categories = ['Email', 'First Name', 'Last Name'];
    let selectedCategory = 'Email';
    let searchText = "";
    let staffSearchResults;
    let studentSearchResults;

    $: {
    	if(searchText && searchText.length > 1) {
		    let query = {};
		    if (selectedCategory === 'Email') {
			    query.email = {$regex: searchText, $options: 'i'};
		    } else if (selectedCategory === 'First Name') {
			    query.firstName = {$regex: searchText, $options: 'i'};
		    } else {
			    query.lastName = {$regex: searchText, $options: 'i'};
		    }
		    staffSearchResults = Staff.find(query);
		    studentSearchResults = Students.find(query);
	    }
    	else {
		    staffSearchResults = undefined;
		    studentSearchResults = undefined;
	    }
    }
    
    const assignedAssets = (person) => {
    	let result = Assets.find({assigneeId: person._id}).fetch();
    	
    	for(next of result) {
    		next.type = AssetTypes.findOne({_id: next.assetTypeId})
	    }
    	
    	return result;
    }
</script>

<div class="container">
    <h1 style="display: block">Asset Assignments</h1>

    <Paper>
        <LayoutGrid>
            <Cell span="{6}">
                <Select bind:value={selectedCategory} label="Category">
                    {#each categories as category}
                        <Option value={category}>{category}</Option>
                    {/each}
                </Select>
            </Cell>
            <Cell span="{6}">
                <TextField type="text" bind:value={searchText} label="Search"></TextField>
            </Cell>
        </LayoutGrid>
    </Paper>

    <div style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; align-content: stretch; column-gap: 2rem;">
<!--        <TextField bind:this={assetIdWidget} style="flex-grow: 999;" type="text" bind:value={assetId} label="Asset ID">-->

<!--        </TextField>-->
<!--        <Button variant="raised" color="secondary" on:click={createAssignment()} disabled={!assetId || assetId.length === 0 || !selectedAssignee}>-->
<!--            <Label style="color: white">Create</Label>-->
<!--        </Button>-->
    </div>
	{#if staffSearchResults}
		<ul>
			{#each $staffSearchResults as next}
				<li>
					{next.firstName} {next.lastName} ({next.email})
					<div style="margin-left: 2rem">
						{#each (assignedAssets(next)) as asset}
							Type: {asset.type.name}<br/>
							AssetId: {asset.assetId}<br/>
							Serial: {asset.serial}<br/>
						{/each}
					</div>
				</li>
			{/each}
		</ul>
	{/if}
	{#if studentSearchResults}
		<ul>
			{#each $studentSearchResults as next}
				<li>
					{next.firstName} {next.lastName} ~ {next.grade} ({next.email})
					<div style="margin-left: 2rem">
						{#each (assignedAssets(next)) as asset}
							Type: {asset.type.name}<br/>
							AssetId: {asset.assetId}<br/>
							Serial: {asset.serial}<br/>
						{/each}
					</div>
				</li>
			{/each}
		</ul>
	{/if}
</div>

<style>

</style>