<script>
	import Tab, { Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import {Meteor} from "meteor/meteor";
	import {onMount} from "svelte";
	import AssetList from "/imports/ui/Assets/AssetList.svelte";
	import AssetDataEntry from "/imports/ui/Assets/AssetDataEntry.svelte";
	import {useTracker} from "meteor/rdb:svelte-meteor-data";
	import Assign from "/imports/ui/Assets/Assign.svelte";
	import Assignments from "/imports/ui/Assets/Assignments.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: 'assignments', label: 'Assignments'});
		tabs.push({id: 'assignment', label: 'Assign'});
	}
	if(isAdmin) {
		tabs.push({id: 'list', label: 'Asset List'});
		tabs.push({id: 'entry', label: 'Data Entry'});
	}
	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 === 'list'}
		<AssetList></AssetList>
	{:else if activeTab && activeTab.id === 'entry'}
		<AssetDataEntry></AssetDataEntry>
	{:else if activeTab && activeTab.id === 'assignment'}
		<Assign></Assign>
	{:else if activeTab && activeTab.id === 'assignments'}
		<Assignments></Assignments>
	{/if}
</div>

<style>
</style>