import { Meteor } from 'meteor/meteor';
import React, { useState, useEffect } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { useTheme } from '@mui/material/styles';
import _ from 'lodash';
import SimpleTable from "/imports/ui/util/SimpleTable";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Select from '@mui/material/Select';
import Chip from '@mui/material/Chip';
import MenuItem from '@mui/material/MenuItem';
import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
import Box from "@mui/material/Box";
import OutlinedInput from '@mui/material/OutlinedInput';
import FormControl from '@mui/material/FormControl';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import {useNavigate} from "react-router-dom";
import {Students} from "/imports/api/students";
import {Staff} from "/imports/api/staff";
import {Assets} from "/imports/api/assets";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Paper from "@mui/material/Paper";
import InputBase from "@mui/material/InputBase";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";

export default () => {
	const navigate = useNavigate()
	const [searchType, setSearchType] = useState("email")
	const [value, setValue] = useState("")
	
	const search = async () => {
		if(searchType === 'email' || searchType === 'firstName' || searchType === 'lastName') {
			if (value && value.length > 1) {
				let query = searchType === 'email' ? {email: {$regex: value, $options: 'i'}} : searchType === 'firstName' ? {firstName: {$regex: value, $options: 'i'}} : {lastName: {$regex: value, $options: 'i'}}
				let students = await Students.find(query).fetchAsync()
				let staff = await Staff.find(query).fetchAsync()
				let all = [...staff, ...students]

				if (all.length > 1) {
					setPeopleToPickFrom(all)
					setOpenPickPersonDialog(true)
				} else if (all.length === 1) {
					navigate("/search?" + (students.length ? "studentId" : 'staffId') + "=" + encodeURIComponent(all[0]._id));
				}
			}
		}
		else if(searchType === 'assetId' || searchType === 'serial') {
			let asset = await Assets.findOneAsync(searchType === 'assetId' ? {assetId: value.toUpperCase()} : {serial : value});
			console.log(asset)
			if(asset) {
				if(searchType === 'assetId')
					navigate("/search?assetId=" + encodeURIComponent(asset.assetId.toUpperCase()))
				else
					navigate("/search?serial=" + encodeURIComponent(asset.serial))
			}
		}
	}

	Meteor.subscribe('students');
	Meteor.subscribe('staff');
	Meteor.subscribe('assets');

	const [openPickPersonDialog, setOpenPickPersonDialog] = useState(false)
	const [peopleToPickFrom, setPeopleToPickFrom] = useState([])
	const pickPersonClosed = (cause, person) => {
		if(openPickPersonDialog) setOpenPickPersonDialog(false)

		if(person && person._id) {
			navigate("/search?" + (person.grade ? "studentId" : 'staffId') + "=" + encodeURIComponent(person._id));
		}
	}
	
	const inputKeyPress = (e) => {
		if(e.key === 'Enter' && value.length > 0) {
			search()
		}
	}

	return (
		<>
			<Dialog open={openPickPersonDialog}>
				<DialogTitle>Pick One</DialogTitle>
				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
					<List>
						{peopleToPickFrom.map((next, i) => {
							return (
								<ListItemButton key={next._id} onClick={(e) => {pickPersonClosed("selection", next)}}>
									<ListItemText primary={next.firstName + " " + next.lastName} secondary={next.email}/>
								</ListItemButton>
							)
						})}
					</List>
				</DialogContent>
				<DialogActions>
					<Button onClick={() => pickPersonClosed("button")}>Cancel</Button>
				</DialogActions>
			</Dialog>

			<div style={{display: "flex", flexDirection: "column", marginTop: "1rem"}} sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}>
				{/*<Paper component='form'>*/}
				{/*	<div style={{marginBottom: "1rem", marginTop: "2rem"}}>*/}
				{/*		<ToggleButtonGroup color="primary" value={resultType} exclusive onChange={(e, type)=>setResultType(type)} aria-label="Result Type">*/}
				{/*			<ToggleButton value="usage">Usage History</ToggleButton>*/}
				{/*			<ToggleButton value="assignment">Assignment History</ToggleButton>*/}
				{/*		</ToggleButtonGroup>*/}
				{/*	</div>*/}
					<div style={{marginBottom: "1rem"}}>
						<ToggleButtonGroup color="primary" value={searchType} exclusive onChange={(e, type)=>setSearchType(type)} aria-label="Search Type">
							<ToggleButton value="email">Email</ToggleButton>
							<ToggleButton value="firstName">First Name</ToggleButton>
							<ToggleButton value="lastName">Last Name</ToggleButton>
							<ToggleButton value="assetId">Asset ID</ToggleButton>
							<ToggleButton value="serial">Serial</ToggleButton>
						</ToggleButtonGroup>
					</div>
					<div>
						<InputBase value={value} onKeyPress={inputKeyPress} onChange={(e) => {setValue(e.target.value)}} sx={{ ml: 1, flex: 1 }} placeholder="Value" inputProps={{ 'aria-label': 'Search Value' }}/>
						<IconButton type="button" sx={{ p: '10px' }} aria-label="search" onClick={search}>
							<SearchIcon />
						</IconButton>
					</div>
				{/*</Paper>*/}
			</div>
		</>
	)
}