import { Meteor } from 'meteor/meteor';
import {Roles} from 'meteor/alanning:roles';
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import _ from 'lodash';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import {Page} from './Page'
import Assignments from './pages/Assignments'
import Assets from './pages/Assets'
import History from './pages/History'
import Users from './pages/Users'
import Admin from './pages/Admin'

export const App = () => {
	const {user, canManageLaptops, isAdmin} = useTracker(() => {
		const user = Meteor.user();
		const canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
		const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
		
		return {
			user,
			canManageLaptops,
			isAdmin
		}
	})

	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Page>
					<div className="container">
						<div className="row">
							TODO: Some statistics and such.
						</div>
					</div>
				</Page>}/>
				<Route path="/assignments/*" element={<Page>
					{canManageLaptops && <Assignments/>}
				</Page>}/>
				<Route path="/assets/*" element={<Page>
					{isAdmin && <Assets/>}
				</Page>}/>
				<Route path="/admin/*" element={<Page>
					{isAdmin && <Admin/>}
				</Page>}/>
				<Route path="/history/*" element={<Page>
						{canManageLaptops && <History/>}
					</Page>}/>
				<Route path="/users/*" element={<Page>
					{isAdmin && <Users/>}
				</Page>}/>
			</Routes>
		</BrowserRouter>
	)
}