import React, { useState } from 'react';
import {Meteor} from "meteor/meteor";
import {Roles} from 'meteor/alanning:roles';
import { useTracker } from 'meteor/react-meteor-data';
import {Link} from 'react-router-dom';
import _ from 'lodash';
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import MenuItem from '@mui/material/MenuItem';
import {InputLabel, List, ListItem, ListItemButton, ListItemText, Paper} from "@mui/material";
import Box from "@mui/material/Box";
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {Editor} from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import {Students} from "/imports/api/students";
import {Staff} from "/imports/api/staff";
import {conditions} from "/imports/api/assets";

const cssTwoColumnContainer = {
	display: 'grid',
	gridTemplateColumns: "1fr 1fr",
	columnGap: '1rem',
	rowGap: '0.4rem',
}

export const Workshops = () => {
	Meteor.subscribe('students');
	Meteor.subscribe('staff');
	Meteor.subscribe('workshops');
	
	const user = Meteor.user();
	const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
	const [selectedWorkshop, setSelectedWorkshop] = useState("")

	const {workshops} = useTracker(() => {
		let workshops = [];
		
		workshops = Workshops.find({isComplete: false}).fetch();

		for(let workshop of workshops) {
			for(let user of workshop.signupSheet) {
				user.data = Students.findOne({_id: user._id})
				if(!user.data) user.data = Staff.findOne({_id: user._id})
			}
		}

		return {workshops}
	});

	const getListItemStyle = (item) => {
		return {
			backgroundColor: selectedWorkshop === item ? '#EECFA6' : 'white'
		}
	}
	
	const newWorkshop = () => {
		if(isAdmin) {
			setEditedWorkshop({})
			setOpenWorkshopEditor(true)
		}
	}
	const editWorkshop = () => {
		if(isAdmin && selectedWorkshop) {
			setEditedWorkshop({...selectedWorkshop})
			setOpenWorkshopEditor(true)
		}
	}

	const [openWorkshopEditor, setOpenWorkshopEditor] = useState(false)
	const [editedWorkshop, setEditedWorkshop] = useState(false)
	const workshopEditorClosed = (save) => {
		const completeHandler = (err, result) => {
			if(err) console.error(err)
			else {
				setOpenWorkshopEditor(false)
				setEditedWorkshop(null)
			}
		}
		
		if(save) {
			if(editedWorkshop._id) Meteor.call('workshops.update', editedWorkshop._id, editedWorkshop.name, editedWorkshop.description, editedWorkshop.signupLimit, completeHandler)
			else Meteor.call('workshops.add', editedWorkshop.name, editedWorkshop.description, editedWorkshop.signupLimit, completeHandler)
		}
		else completeHandler()
	}
	
	return (
		<>
			<Dialog open={openWorkshopEditor} onClose={workshopEditorClosed}>
				<DialogTitle>Workshop Editor</DialogTitle>
				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Name" value={editedWorkshop.name} onChange={(e) => {editedWorkshop.name = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
					<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" type="number" label="Signup Limit" value={editedWorkshop.signupLimit} onChange={(e) => {editedWorkshop.signupLimit = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
				</DialogContent>
				<DialogActions>
					<Button onClick={() => workshopEditorClosed(true)}>Save</Button>
					<Button onClick={() => workshopEditorClosed(false)}>Cancel</Button>
				</DialogActions>
			</Dialog>
			
			<Box style={{marginTop: '1rem',...cssTwoColumnContainer}}>
				{isAdmin && <Button onClick={() => newWorkshop()}>New...</Button>}
				<List>
					{workshops.map((next, i) => {
						return (
							<ListItemButton key={next._id} onDoubleClick={editWorkshop} style={getListItemStyle(next)} selected={selectedWorkshop === next} onClick={(e) => {setSelectedWorkshop(next)}}>
								<ListItemText primary={next.name}/>
							</ListItemButton>
						)
					})}
				</List>
			</Box>

			<Box style={{...cssTwoColumnContainer}}>
				<Paper>
					{/*<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = ""}}/>*/}
					{`${selectedWorkshop.description}`}
				</Paper>
				<List>
					{selectedWorkshop.signupSheet.map((next, i) => {
						return (
							<ListItem key={next._id}>
								<ListItemText primary={next.data.firstName + " " + next.data.lastName} secondary={next.data.email}/>
							</ListItem>
						)
					})}
				</List>
			</Box>
		</>
	)
}