<script>
	import Tab, { Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import {Meteor} from "meteor/meteor";
	import {useTracker} from "meteor/rdb:svelte-meteor-data";
	import AssignAssets from "/imports/ui/Assignments/AssignAssets.svelte";
	import AssignmentByAssignee from "/imports/ui/Assignments/AssignmentByAssignee.svelte";
	import AssignmentByAsset from "/imports/ui/Assignments/AssignmentByAsset.svelte";
	import AssignmentByPerson from "/imports/ui/Assignments/AssignmentByPerson.svelte";

	let canManageLaptops = false;
	let isAdmin = false;
	$: currentUser = useTracker(() => Meteor.user());

	Tracker.autorun(() => {
		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
		let user = Meteor.user();
		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
	});

	let tabs = [];

	if(canManageLaptops) {
		// tabs.push({id: 'listAssignmentsByAssignee', label: 'Assignments By Assignee'});
		tabs.push({id: 'listAssignmentsByPerson', label: 'By Person'});
		tabs.push({id: 'listAssignmentsByAsset', label: 'By Asset'});
		tabs.push({id: 'assignAssets', label: 'Assign Assets'});
	}
	let activeTab = tabs[0];
</script>

<div class="container">
	<TabBar tabs={tabs} minWidth let:tab bind:active={activeTab}>
		<Tab {tab}>
			<Label>{tab.label}</Label>
		</Tab>
	</TabBar>
	{#if activeTab && activeTab.id === 'assignAssets'}
		<AssignAssets></AssignAssets>
	{:else if activeTab && activeTab.id === 'listAssignmentsByAssignee'}
		<AssignmentByAssignee></AssignmentByAssignee>
	{:else if activeTab && activeTab.id === 'listAssignmentsByPerson'}
		<AssignmentByPerson></AssignmentByPerson>
	{:else if activeTab && activeTab.id === 'listAssignmentsByAsset'}
		<AssignmentByAsset></AssignmentByAsset>
	{/if}
</div>

<style>
</style>