<script>
    import {Meteor} from "meteor/meteor";
    import {onMount} from "svelte";
    import TextField from '@smui/textfield';
    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 {Students} from "/imports/api/students";
    import {AssetTypes} from "/imports/api/asset-types";
    import Button, { Label } from '@smui/button';
    import Dialog, { Title, Content, Actions } from '@smui/dialog';

    onMount(async () => {
	    Meteor.subscribe('assets');
	    Meteor.subscribe('students');
	    Meteor.subscribe('staff');
	    Meteor.subscribe('assetTypes');
    });
    let searchText = "";
    let foundAsset;
    let selectedResult;
    let foundAssignee;
    let foundAssetType;

    $: {
        selectedResult = null;
	    
	    if(searchText) {
		    foundAsset = Assets.findOne({assetId: searchText});
	    }
	    else {
		    foundAsset = undefined;
	    }
    }
    
    $: {
    	if(foundAsset) {
		    foundAssetType = AssetTypes.findOne({_id: foundAsset.assetTypeId});
		    
    		if(foundAsset.assigneeType === 'Student') {
			    foundAssignee = Students.findOne({_id: foundAsset.assigneeId});
		    }
    		else {
			    foundAssignee = Staff.findOne({_id: foundAsset.assigneeId});
		    }
	    }
    	else {
		    foundAssetType = undefined;
		    foundAssignee = undefined;
	    }
    }
    
    const formatDate = (date) => {
        return date.toLocaleDateString('en-us', {weekday: 'long', year: 'numeric', month: 'short', day: 'numeric'});
    }
    const unassign = () => {
    	if(confirm("Unassign Asset?")) {
    		Meteor.call("assets.unassign", foundAsset.assetId);
	    }
    }
</script>

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

    <Paper>
        <LayoutGrid>
            <Cell span="{6}">
                <TextField type="text" bind:value={searchText} label="Asset ID"></TextField>
            </Cell>
        </LayoutGrid>
    </Paper>

    {#if foundAsset}
	    <div>Asset ID: {foundAsset.assetId}</div>
	    {#if foundAssetType}
		    <div>{foundAssetType.name}</div>
	    {/if}
	    {#if foundAssignee}
		    <div>Assigned on: {formatDate(foundAsset.assignmentDate)}</div>
	        <div>Assigned to: {foundAssignee.firstName} {foundAssignee.lastName}
		        {#if foundAssignee.grade} ~ {foundAssignee.grade} {/if}({foundAssignee.email})</div>

		    <Button variant="raised" touch on:click={unassign}>
			    <Label style="color: white">Unassign</Label>
		    </Button>
	    {/if}
    {/if}

<!--	<Dialog bind:open={showDialog} aria-labelledby="Confirm" aria-describedby="Unassign Confirmation">-->
<!--		&lt;!&ndash; Title cannot contain leading whitespace due to mdc-typography-baseline-top() &ndash;&gt;-->
<!--		<Title id="simple-title">Unassign Asset?</Title>-->
<!--		<Content id="simple-content"></Content>-->
<!--		<Actions>-->
<!--			<Button on:click={() => (clicked = 'No')}>-->
<!--				<Label>No</Label>-->
<!--			</Button>-->
<!--			<Button on:click={() => (clicked = 'Yes')}>-->
<!--				<Label>Yes</Label>-->
<!--			</Button>-->
<!--		</Actions>-->
<!--	</Dialog>-->
</div>

<style>

</style>