import { Meteor } from 'meteor/meteor';
import {Roles} from 'meteor/alanning:roles';
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import {Link} from 'react-router-dom';
import _ from 'lodash';
import Button from "@mui/material/Button";
import {Box, Grid} from "@mui/material";

export const StudentPage = (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
		}
	})

	function performLogin() {
		//Login style can be "popup" or "redirect".  I am not sure we need to request and offline token.
		Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
			if (err) {
				console.log(err);
			} else {
				//console.log("Logged in");
			}
		})
	}

	function performLogout() {
		Meteor.logout();
	}

	return (
		<>
			{!user && (
				<>
					<div style={{width: '100%', height: '100%', background: 'url(/images/student.svg)', backgroundSize: 'cover', backgroundPosition: 'center bottom', position: 'fixed', right: 0, bottom: 0, top: 0, left: 0}}> </div>

					<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%'}}>
						<Button css={{height: "100%", width: '100px', margin: 'auto'}} variant="contained" className="button" onClick={performLogin}>Login</Button>
					</div>
				</>
			)}
			{user && (
				<>
					<div className='pageHeaderContainer'>
						<div className="container">
							<header className="row pageHeader">
								<div className="col-12 logoContainer">
									<img className="logo" src="/images/logo.svg" alt="Logo"/>
									<div className="login">
										<button type="button" role="button" onClick={performLogout}>Logout</button>
									</div>
								</div>
								<div className="col-12 center title">Tempest</div>
							</header>
						</div>
					</div>
					<div className='pageNavContainer'>
						<div className='container'>
							<header className='row pageNavHeader'>
								<nav className="col-12 center">
									<Link to='/'>Home</Link>
								</nav>
							</header>
						</div>
					</div>
					<div className='pageContentContainer'>
						{props.children}
					</div>
				</>
			)}
		</>
	)
}