<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';
	import Paper from '@smui/paper';
	import LayoutGrid, {Cell} from '@smui/layout-grid';
	import {Assets} from "/imports/api/assets";

	let grades = ['All'];
	onMount(async () => {
		Meteor.subscribe('sites');
		Meteor.subscribe('assets');
		Meteor.call('students.getPossibleGrades', (err, result) => {
			if(err) console.log(err);
			else {
				grades = ['All', ...result];
			}
		});
	});
	// Load the sites (reactive).
	let sites = Sites.find({});
	let selectedSiteId;
	let assignees;
	let siteSelectComponent;
	let categories = ['Student', 'Staff'];
	let selectedCategory = 'Student';
	let sorts = [{column: 'firstName', name: 'First Name'}, {column: 'lastName', name: 'Last Name'}, {column: 'email', name: 'Email'}];
	let selectedSort = 'firstName'
	let selectedGrade = 'All';
	let selectedAssignee;
	let assetId = "";
	let assetIdWidget;

	$: {
		if(selectedSiteId) {
			if(selectedCategory === 'Student') {
				Meteor.subscribe('students', selectedSiteId);
				let filter = {siteId: selectedSiteId};
				
				if(selectedGrade && selectedGrade !== 'All') filter.grade = selectedGrade;
				assignees = Students.find(filter, {sort: [selectedSort]});
			}
			else if(selectedCategory === 'Staff') {
				Meteor.subscribe('staff', selectedSiteId);
				assignees = Staff.find({siteId: selectedSiteId}, {sort: [selectedSort]});
			}
		}
	}

	let conditions = ['New', 'Like New', 'Good', 'Okay', 'Damaged'];
	let condition = "New";
	let conditionDetails = "";

	const createAssignment = () => {
		let asset = Assets.findOne({assetId});

		if(asset) {
			condition = asset.condition;
			conditionDetails = asset.conditionDetails;
		}

		openCreateDialog();
	}

	let openDialog = false;

	const openCreateDialog = () => {
		// assetTypeDialogSelectedIndex = -1;
		openDialog = true;
	}
	const dialogClosed = (e) => {
		switch (e.detail.action) {
			case 'create':
				if(assetId && assetId.length && selectedAssignee) {
					Meteor.call("assets.assign", assetId, selectedCategory === 'Student' ? "Student" : "Staff", selectedAssignee._id, condition, conditionDetails, (err, result) => {
						if(err) {
							console.error(err);
							//TODO: Display an error!
						}
						else {
							// TODO: Set focus to the asset ID field.
							assetId = "";
						}
					});
				}
				break;
			default:
			case 'cancel':
				break;
		}
	}
</script>

<div class="container">
	<Dialog bind:open={openDialog} surface$style="width: 850px; max-width: calc(100vw - 32px);"
			on:SMUIDialog:closed={dialogClosed}>
		<Title id="large-scroll-title">Report Asset Condition</Title>
		<Content id="large-scroll-content">
			<Select bind:value={condition} label="Condition">
				{#each conditions as next}
					<Option value={next}>{next}</Option>
				{/each}
			</Select>
			<div style="grid-column: 1/span 1">
				<TextField textarea style="width: 100%; height: 20rem; margin-top: 1rem" helperLine$style="width: 100%" bind:value={conditionDetails} label="Condition Details">
				</TextField>
			</div>
		</Content>
		<Actions>
			<Button action="create" default>
				<Label>Ok</Label>
			</Button>
			<Button action="cancel">
				<Label>Cancel</Label>
			</Button>
		</Actions>
	</Dialog>

	<h1 style="display: block">Assign Assets</h1>

	<Paper>
		<LayoutGrid>
			<Cell span="{6}">
				<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
					{#each $sites as site}
						<Option value={site._id}>{site.name}</Option>
					{/each}
				</Select>
			</Cell>
			<Cell span="{6}">
				<Select bind:value={selectedCategory} label="Category">
					{#each categories as category}
						<Option value={category}>{category}</Option>
					{/each}
				</Select>
			</Cell>
			<Cell span="{6}">
				{#if (selectedCategory === 'Student')}
					<Select bind:value={selectedGrade} label="Grade">
						{#each grades as grade}
							<Option value={grade}>{grade}</Option>
						{/each}
					</Select>
				{/if}
			</Cell>
			<Cell span="{6}">
				<Select bind:value={selectedSort} label="Sort">
					{#each sorts as sort}
						<Option value={sort.column}>{sort.name}</Option>
					{/each}
				</Select>
			</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>
	<List twoLine singleSelection style="max-height: 60%">
		{#if $assignees}
			{#each $assignees as assignee}
				<Item on:SMUI:action={() => (selectedAssignee = assignee)} selected={selectedAssignee === assignee}>
					<Text>
						<PrimaryText>{assignee.firstName} {assignee.lastName}</PrimaryText>
						<SecondaryText>{assignee.email} {assignee.grade ? '(' + assignee.grade + ')' : ""}</SecondaryText>
					</Text>
				</Item>
			{/each}
		{/if}
	</List>
</div>

<style>
	
</style>