import { Meteor } from 'meteor/meteor';
import {Roles} from 'meteor/alanning:roles';
import React, { useState } from 'react';
import {createTheme, ThemeProvider} from '@mui/material/styles'
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 Search from './pages/Search'
import Users from './pages/Users'
import Admin from './pages/Admin'
import Home from './pages/Home'
import {StudentPage} from './pages/Student/StudentPage'
import {WorkshopList} from './pages/Student/WorkshopList'

const appTheme = createTheme({
	components: {
		MuiTableSortLabel: {
			styleOverrides: {
				root: {
					"&.Mui-active": {
						color: 'white',
						"&:hover": {
							color: '#d2d1d1'
						},
					},
					color: 'white',
					backgroundColor: '#333447',
					"&:hover": {
						color: '#d2d1d1',
					},
				},
				icon: {
					'& path': {
						fill: 'white'
					}
				}
			}
		},
		MuiTableCell: {
			styleOverrides: {
				// root: {
				// 	'&:hover': {
				// 		color: 'white !important'
				// 	}
				// },
				head: {
					color: 'white !important',
					backgroundColor: '#333447',
					'&:hover': {
						color: 'white !important'
					},
					hover: {
						color: 'white !important'
					}
				},
				// hover: {
				// 	color: 'white !important',
				// 	'&:hover': {
				// 		color: 'white !important'
				// 	}
				// }
			}
		},
	}
})

export const App = (props) => {
	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 (
		<ThemeProvider theme={appTheme}>
			<BrowserRouter>
				<Routes>
					<Route path="/" element={
						<Page>
							<Home/>
						</Page>
					}/>
					<Route path="/student" element={
						<StudentPage>
							{user && <WorkshopList/>}
						</StudentPage>
					}/>
					<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="/search" element={
						<Page>
							{canManageLaptops && <Search/>}
						</Page>
					}/>
					<Route path="/users/*" element={
						<Page>
							{isAdmin && <Users/>}
						</Page>
					}/>
				</Routes>
			</BrowserRouter>
		</ThemeProvider>
	)
}