@material-ui/pickers#KeyboardDatePicker JavaScript Examples

function InlineDatePicker(props) {
  return (
    <MuiThemeProvider theme={customTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          autoOk
          // disableToolbar
          variant="inline"
          inputVariant="outlined"
          format="dd/MM/yyyy"
          id={props.id}
          color={props.color}
          label={props.label}
          value={props.value}
          error={props.error}
          placeholder={props.placeholder}
          helperText={props.helperText}
          onChange={props.onChange}
          KeyboardButtonProps={{
            "aria-label": "change date",
          }}
        />
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

KeyDatePickerContainer = ({ id, label, margin, onChange, value, ...rest }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <KeyboardDatePicker
      variant="inline"
      margin={margin}
      id={id}
      value={value}
      label={label}
      format="MM/dd/yyyy"
      disablePast={true}
      onChange={(newDate) => {
        onChange(newDate);
        setIsOpen(false);
      }}
      KeyboardButtonProps={{
        onFocus: (e) => {
          setIsOpen(true);
        },
        "aria-label": "change date",
      }}
      PopoverProps={{
        disableRestoreFocus: true,
        onClose: () => {
          setIsOpen(false);
        },
      }}
      InputProps={{
        onFocus: () => {
          setIsOpen(true);
        },
      }}
      open={isOpen}
      {...rest}
    />
  );
}

MuiDatePicker = (props) => {
  const { name, required, errorobj } = props;
  let isError = false;
  let errorMessage = "";
  if (errorobj && errorobj.hasOwnProperty(name)) {
    isError = true;
    errorMessage = errorobj[name].message;
  }
  return (
    <React.Fragment>
      <KeyboardDatePicker
        format="DD-MM-YYYY"
        fullWidth={true}
        InputLabelProps={{
          className: required ? "required-label" : "",
          required: required || false,
        }}
        error={isError}
        helperText={errorMessage}
        {...props}
      />
    </React.Fragment>
  );
}

render() {
    return (
      <ThemeProvider theme = {theme}>
        <div>
          <Navbar
          history = {this.props.history}/>
          <br/>
          <div style = {{"textAlign" : "center",'color' : '#006064'}}>
              <form className="form">
                <h3>Create New Auction</h3>
                <TextField
                  variant="outlined"
                  label = "Auction Title"
                  type = "text"
                  name = "title"
                  style = {{"width" : "60%", "margin":"10px"}}
                  placeholder = "Enter Auction Title"
                  value = {this.state.title}
                  onChange = {this.handleInputChange}
                  required
                />
                <br/>
                <TextField
                  variant="outlined"
                  label = "Asset Address"
                  type = "text"
                  name = "asset_addr"
                  style = {{"width" : "60%", "margin":"10px"}}
                  placeholder = "Enter Address of the asset you wish to sell"
                  value = {this.state.asset_addr}
                  onChange = {this.handleInputChange}
                  required
                />
                <br/>
                <TextField
                  variant="outlined"
                  label = "Reserved Price"
                  type = "number"
                  name = "reserved_price"
                  style = {{"width" : "60%", "margin":"10px"}}
                  placeholder = "Enter Reserved Price in Ethers"
                  value = {this.state.reserved_price}
                  onChange = {this.handleInputChange}
                  required
                />
                <br/>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    clearable
                    value={this.state.selectedDate}
                    label = "Select deadline for the auction"
                    onChange={date => this.handleDateChange(date)}
                    minDate={new Date()}
                    format="dd/MM/yyyy"
                    style = {{"width" : "40%", "margin":"10px"}}
                  />
                </MuiPickersUtilsProvider>
                <br/>
                <br/>
                <Button variant = "contained" style = {{'color' : '#FFFFFF', 'background' : '#006064'}} onClick = {this.createAuction}>Create Auction</Button>
                <br/>
                <br/>

              </form>
          </div>
        </div>
      </ThemeProvider>
    );
  }

ReminderAction = ({ onAddReminder }) => {
  const [open, setOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
  const toggleReminder = () => {
    setOpen(() => !open);
  };

  const handleSave = () => {
    onAddReminder(selectedDate);
    toggleReminder();
  };

  return (
    <Box>
      <IconButton aria-label="Remind" onClick={toggleReminder}>
        <AlarmIcon />
      </IconButton>
      <Dialog
        open={open}
        onClose={toggleReminder}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Remind</DialogTitle>
        <DialogContent>
          <DialogContentText>
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <KeyboardDatePicker
                margin="normal"
                label="Date"
                format="MM/dd/yyyy"
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change date',
                }}
              />
              <KeyboardTimePicker
                margin="normal"
                label="Time"
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change time',
                }}
              />
            </MuiPickersUtilsProvider>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={toggleReminder} color="primary">
            Cancel
          </Button>
          <Button onClick={handleSave} color="primary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}

render() {

        const { classes, selected_currency, _selected_date, coin_data, coin_id } = this.state;
        const { _cryptocurrency_input_value, _fiat_input_value, _min_date } = this.state;

        const date_format = this._get_date_format();

        const market_convert_card = coin_data !== null ?
            <Fade in>
                <Card>
                    <CardHeader title={t( "components.coin_charts_convert.title")} />
                    <CardContent>
                        <TextField className={classes.convertInput}
                                   id="cryptocurrency-input"
                                   type="number"
                                   label={coin_data.symbol.toUpperCase()}
                                   value={_cryptocurrency_input_value}
                                   onChange={this._handle_cryptocurrency_input_value_change}
                        />
                        <TextField
                            className={classes.convertInput}
                            id="fiat-input"
                            type="number"
                            label={selected_currency}
                            value={_fiat_input_value}
                            onChange={this._handle_fiat_input_value_change}
                        />
                        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={DATE_FNS_LOCALE_MAP[document.documentElement.lang] || DATE_FNS_LOCALE_MAP["en"]}>
                            <KeyboardDatePicker
                                cancelLabel={t("words.cancel")}
                                okLabel={t("words.ok")}
                                minDate={_min_date}
                                maxDate={Date.now()}
                                disableFuture={true}
                                invalidDateMessage={t("sentences.invalid date message")}
                                className={classes.noTopMargin}
                                margin="normal"
                                id="date-picker-dialog"
                                label={t( "sentences.pick a date")}
                                format={date_format}
                                value={_selected_date}
                                onChange={this._handle_selected_date_change}
                            />
                        </MuiPickersUtilsProvider>
                        <Button className={classes.buyButton}
                                onClick={(event) => {this._open_buy()}}
                                fullWidth
                                variant="contained"
                                color="primary">
                            {t( "components.coin_charts_convert.buy_x", {coin_name: coin_data.name})}
                        </Button>
                    </CardContent>
                </Card>
            </Fade>: null;

        return (
            <div className={classes.fullHeight}>{market_convert_card}</div>
        );
    }

SchedulePost = ({ postId, scheduledTime }) => {
	const [schedule, setSchedule] = useState(scheduledTime || new Date());
	const [invalidDate, setInvalidDate] = useState(false);
	const [modalOpen, setModalOpen] = useState(false);

	const dispatch = useDispatch();

	const handleChange = (date, e) => {
		console.log(e);
		setInvalidDate(false);
		setSchedule(date);
	};

	const handleSchedulePost = async () => {
		if (schedule > Date.now()) {
			await dispatch(scheduleTweet(postId, schedule));
		} else {
			setInvalidDate(true);
		}
	};

	return (
		<>
			<Button onClick={() => setModalOpen(true)} color="primary">
				{scheduledTime ? "Reschedule" : "Schedule"}
			</Button>
			<Modal
				open={modalOpen}
				handleClose={() => setModalOpen(false)}
				title="Schedule Post"
				handleConfirmation={handleSchedulePost}
			>
				<MuiPickersUtilsProvider utils={DateFnsUtils}>
					<Grid container direction="column" justify="space-around">
						<KeyboardDatePicker
							minDate={new Date()}
							margin="normal"
							id="date-picker-dialog"
							label="Date"
							format="MM/dd/yyyy"
							value={schedule}
							onChange={handleChange}
							KeyboardButtonProps={{
								"aria-label": "change date",
							}}
						/>
						<KeyboardTimePicker
							minDate={new Date()}
							margin="normal"
							id="time-picker"
							label="Time"
							value={schedule}
							onChange={handleChange}
							KeyboardButtonProps={{
								"aria-label": "change time",
							}}
						/>
						{invalidDate && (
							<Typography variant="caption" color="error">
								Invalid time
							</Typography>
						)}
					</Grid>
				</MuiPickersUtilsProvider>
			</Modal>
		</>
	);
}

TimeContainer = (props) => {
  const history = useHistory();

  const {
    oldSeats, oldDate, oldTime, onConfirmClick, getHours, restaurantHours, getAvailable,
    availableTimes, onSeatChange, onDateChange, isLoading, mainHistory, tableCapacity, getCapacity,
  } = props;

  const [seats, changeSeats] = useState(oldSeats);
  const [selectedDate, setSelectedDate] = useState(oldDate);
  const [selectedTime, setSelectedTime] = useState(oldTime);
  const [overCapacity, setOverCapacity] = useState(false);
  const [capacityMsg, setCapacityMsg] = useState("");

  useEffect(getHours, []);
  useEffect(getCapacity, []);

  const day = getDayForDate(new Date(selectedDate));
  const month = new Date(selectedDate).getMonth();
  const dates = new Date(selectedDate).getDate();
  const times = restaurantHours.find((x) => x.DayOfWeek === day);

  const today = new Date();
  const todaysMonth = today.getMonth();
  const todaysDate = today.getDate();
  const todaystime = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  const todaystimeInt = Number.parseInt(todaystime.substring(0, 2), 10);
  // There will be no times when the restaurant is closed
  const noTimes = times == null;
  const hideTimes = seats.length === 0 || selectedDate == null;
  const dateError = selectedDate == null;
  const maxGuest = tableCapacity.maximum;
  const minGuest = tableCapacity.minimum;

  let openTime = "";
  let closeTime = "";

  if (!noTimes) {
    openTime = Number.parseInt(times.OpenTime.substring(0, 2), 10);
    closeTime = Number.parseInt(times.CloseTime.substring(0, 2), 10);
  }

  const handleTimeConfirmation = () => {
    changePath("/details", history);
    onConfirmClick(selectedTime);
  };

  const handleTime = (value) => {
    setSelectedTime(value);
  };

  const handleGuestChange = (e) => {
    const currentSeats = (e.target.validity.valid) ? e.target.value : seats;
    changeSeats(currentSeats);
  };

  const handleCapacity = (seat) => {
    if (seat > maxGuest || seat < minGuest) {
      if (seat < minGuest) setCapacityMsg(messages.time.minGuestMsg + minGuest);
      else setCapacityMsg(messages.time.maxGuestMsg + maxGuest);
      setOverCapacity(true);
    } else {
      getAvailable();
      setOverCapacity(false);
    }
  };

  return (
    <div className={style.stylingParent}>
      <div className={style.bookingDetailsContainer}>
        <div className={style.bookingDetail}>
          <TextField
            type="text"
            inputProps={{ pattern: "[0-9]*" }}
            className={style.textField}
            label="Number of Guests"
            variant="outlined"
            value={seats}
            onChange={(e) => {
              handleGuestChange(e);
              onSeatChange(e.target.value)
              handleCapacity(e.target.value)
              getAvailable();
            }}
          />
        </div>
        <div className={style.bookingDetail}>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <KeyboardDatePicker
              disableToolbar
              style={{ width: "100%" }}
              inputVariant="outlined"
              format="dd-MM-yyyy"
              margin="normal"
              label="Select a Date"
              value={selectedDate}
              error={dateError}
              disablePast = "true"
              onChange={(e) => {
                try {
                  const formattedDate = format(e, "yyyy-MM-dd");
                  setSelectedDate(formattedDate);
                  onDateChange(formattedDate);
                  getAvailable();
                } catch (RangeError) {
                  setSelectedDate(null);
                  getAvailable();
                }
              }}
              KeyboardButtonProps={{
                "aria-label": "change date",
              }}
            />
          </MuiPickersUtilsProvider>
        </div>
        {hideTimes ? null
          : (
            <div className={classNames(style.buttonContainer, isLoading ? style.loading : "")}>
              {isLoading ? <div className={style.loading}><CircularProgress /></div> : (
                <>
                {overCapacity ? <div className = {style.capacityMsg}>{capacityMsg}</div> : 
                 noTimes || availableTimes.availableHours == null ? <div>Closed</div>
                    : generateAllTimes(openTime, closeTime).map((time) => {
                      const available = availableTimes.availableHours;
                      const hour = Number.parseInt(time.time.substring(0, 2), 10);
                      return (
                        <Button
                          key={`time_button_${time.time}`}
                          variant="contained"
                          disabled={(available.indexOf(hour) === -1) || (hour <= todaystimeInt && month === todaysMonth && dates === todaysDate) }
                          value={time}
                          color={time.time === selectedTime ? "secondary" : "primary"}
                          onClick={() => handleTime(time.time)}
                        >
                          {time.time}
                        </Button>
                      );
                    })}
                </>
              )}
            </div>
          )}
        <div className={style.submitButtonContainer}>
          <Button
            className={style.submitButton}
            variant="contained"
            color="primary"
            onClick={() => { if (window.confirm('Are you sure you want to leave before booking? Progress will not be saved'))changePath("/", mainHistory)}}
          >
            Cancel
          </Button>
          <Button
            className={style.submitButton}
            variant="contained"
            color="primary"
            onClick={handleTimeConfirmation}
            disabled={seats.length === 0 || selectedTime.length === 0 || overCapacity === true}
          >
            {timeMessages.buttonNextText}
          </Button>
        </div>
      </div>
    </div>

  );
}

export default function LocalDomain(props){
    ipcRenderer.on('title-reply', (event, arg) => {
        console.log(arg+" "+props.directory);
        if(arg==props.directory)
        save();
      })
    

    const classes = useStyles();
    console.log(props.json.LocalDomain);

    const [Libraries, setLibraries] = React.useState(
    //     [{
    //         libraryName : "moja.modules.cbm",
    //         libraryType: "external"
    //     },
    //     {
    //         libraryName : "",
    //         libraryType: ""
    //     }
    // ]
    getLibraries()
    );
    
function getLibraries(){
    const tempL=[];
    for (const [key, value] of Object.entries(props.json.Libraries)) {
        tempL.push(
            {
                libraryName: key,
                libraryType: value
            }
        )
    }
    return tempL;
}
    
    const [open, setOpen] = React.useState(false);

    const handleClickSnack = () => {
        setOpen(true);
      };
    
      const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
          return;
        }
    
        setOpen(false);
      };

    const [LocalDomain, setLocalDomain] = React.useState(
    //     {
    //     start_date : new Date('2014-08-18T21:11:54'),
    //     end_date : new Date('2014-08-19T21:11:54'),
    //     landUnitBuildSuccess: "landUnitBuildSuccess",
    //     simulateLandUnit: "simulateLandUnit",
    //     sequencer_library: "moja.modules.cbm",
    //     sequencer: "CBMSequencer",
    //     timing: "annual",
    //     type: "spatial_tiled",
    //     landscape: {
    //         "provider": "RasterTiled",
    //         "num_threads": 4,
    //         "tiles": [],
    //         "x_pixels": 1000,
    //         "y_pixels": 1000,
    //         "tile_size_x": 1.0,
    //         "tile_size_y": 1.0
    //     }
    props.json.LocalDomain
    ); 
    const [tempLibrary, setTempLibrary] = React.useState({});

    useEffect(()=>{console.log(Libraries);
        const temp={};
        Libraries.map(inp => temp[inp.libraryName]=inp.libraryType);
        const temp1={};
        temp1["Libraries"]=temp;
        temp1["LocalDomain"]=LocalDomain;
        console.log(JSON.stringify(temp1));
        setTempLibrary(temp1);

    },[Libraries, LocalDomain]);

    function handleChangeLibrary(index, libraryName, libraryType)
    {
        const tempLibraries = [...Libraries];
        tempLibraries[index].libraryName = libraryName!=="" ? libraryName : tempLibraries[index].libraryName ;
        tempLibraries[index].libraryType = libraryType!=="" ? libraryType : tempLibraries[index].libraryType ;
        setLibraries(tempLibraries);
    }

    function addLibrary()
    {
        const tempLibraries = [...Libraries];
        tempLibraries.push({
            libraryName : "",
            libraryType: ""
        });
        setLibraries(tempLibraries);
    }

    function deleteLibrary(index)
    {
        const tempLibraries = [...Libraries];
        tempLibraries.splice(index,1);
        setLibraries(tempLibraries);
    }

    function handleChangeLocalDomain(key, value)
    {
        const tempLibraries = {...LocalDomain};
        tempLibraries[key] = value;
        setLocalDomain(tempLibraries);
        console.log(LocalDomain);
    }

    const save = ()=>
    {
        console.log("save from localdomain");
        fs.writeFileSync(props.directory, JSON.stringify(tempLibrary, null, 2),{encoding: "utf-8"});
        handleClickSnack();
    }
  
    return(
        <div id="container">
            <div id="jsonEditor">
                <h1>Libraries:</h1>
                <Paper elevation={5} className={classes.paper}>
                {
                    Libraries.map((inputField, index) => (
                        <div>
                            <FormControl className={classes.formControl}>
                            <InputLabel id="demo-simple-select-label">Library Name</InputLabel>
                            <Select
                                labelId="demo-simple-select-label"
                                id="demo-simple-select"
                                className={classes.libraryName}
                                value={(inputField.libraryName=="" || inputField.libraryName=="moja.modules.cbm" || inputField.libraryName=="moja.modules.zipper" || inputField.libraryName=="moja.modules.gdal")?inputField.libraryName : "other"}
                                onChange={event => {if(event.target.value=="other"){handleChangeLibrary(index, event.target.value, "");document.getElementById("other"+index).style.display="block";document.getElementById("other-val"+index).value=""} else {document.getElementById("other"+index).style.display="none";handleChangeLibrary(index, event.target.value, "")}}}
                                >
                                <MenuItem value={"moja.modules.cbm"}>moja.modules.cbm</MenuItem>
                                <MenuItem value={"moja.modules.zipper"}>moja.modules.zipper</MenuItem>
                                <MenuItem value={"moja.modules.gdal"}>moja.modules.gdal</MenuItem>
                                <MenuItem value={"other"}>other</MenuItem>
                            </Select>
                            </FormControl>
                            <FormControl className={classes.formControl}>
                                <div id={"other"+index} style={{display: "none"}}><TextField id={"other-val"+index} label="library name" onChange={event => handleChangeLibrary(index, event.target.value, "")} /></div>
                            </FormControl>
                            <FormControl className={classes.formControl}>
                            <InputLabel id="demo-simple-select-label">Library Type</InputLabel>
                            <Select
                                labelId="demo-simple-select-label"
                                id="demo-simple-select"
                                className={classes.libraryType}
                                value={inputField.libraryType}
                                onChange={event => handleChangeLibrary(index, "", event.target.value)}
                                >
                                <MenuItem value={"internal"}>internal</MenuItem>
                                <MenuItem value={"external"}>external</MenuItem>
                            </Select>
                            </FormControl>
                            <IconButton color="primary" aria-label="add library" style={{marginTop: "10px"}} onClick={()=>{document.getElementById("other"+index).style.display="none";deleteLibrary(index)}}>
                                <CancelIcon />
                            </IconButton>
                        </div>
                    ))}
                    <IconButton color="primary" aria-label="add library" style={{marginLeft: "16vw"}} onClick={()=>addLibrary()}>
                        <AddCircleIcon />
                    </IconButton>
                </Paper>

                <h1>LocalDomain:</h1>
                <Paper elevation={5} className={classes.paper}>
                        <div>
                        <FormControl className={classes.formControl}>
                            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                <KeyboardDatePicker
                                margin="normal"
                                id="start_date"
                                label="start_date(yy/mm/dd)"
                                format="yyyy/MM/dd"
                                value={LocalDomain.start_date}
                                onChange={date => handleChangeLocalDomain("start_date",date)}
                                KeyboardButtonProps={{
                                    'aria-label': 'change time',
                                }}
                                />
                            </MuiPickersUtilsProvider>
                        </FormControl>
                            {/* <br /> */}
                        <FormControl className={classes.formControl}>
                            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                <KeyboardDatePicker
                                margin="normal"
                                id="end_date"
                                label="end_date(yy/mm/dd)"
                                format="yyyy/MM/dd"
                                value={LocalDomain.end_date}
                                onChange={date => handleChangeLocalDomain("end_date",date)}
                                KeyboardButtonProps={{
                                    'aria-label': 'change time',
                                }}
                                />
                            </MuiPickersUtilsProvider>
                        </FormControl>
                            <br />
                        <FormControl className={classes.formControl}>
                            <TextField id="landUnitBuildSuccess" label="landUnitBuildSuccess" variant="filled" defaultValue={LocalDomain.landUnitBuildSuccess} onChange={event => handleChangeLocalDomain("landUnitBuildSuccess",event.target.value)} />
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            <TextField id="simulateLandUnit" label="simulateLandUnit" variant="filled" defaultValue={LocalDomain.simulateLandUnit} onChange={event => handleChangeLocalDomain("simulateLandUnit",event.target.value)} />
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            <TextField id="filled-basic" label="sequencer_library" variant="filled" defaultValue={LocalDomain.sequencer_library} onChange={event => handleChangeLocalDomain("sequencer_library",event.target.value)} />
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            <TextField id="filled-basic" label="sequencer" variant="filled" defaultValue={LocalDomain.sequencer} onChange={event => handleChangeLocalDomain("sequencer",event.target.value)}/>
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            <InputLabel id="demo-simple-select-label">timing</InputLabel>
                            <Select
                                labelId="demo-simple-select-label"
                                id="timing"
                                className={classes.libraryName}
                                value={LocalDomain.timing}
                                onChange={event => handleChangeLocalDomain("timing",event.target.value)}
                                >
                                <MenuItem value={"annual"}>annual</MenuItem>
                                <MenuItem value={"monthly"}>monthly</MenuItem>
                                <MenuItem value={"daily"}>daily</MenuItem>
                            </Select>
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            {/* <TextField id="filled-basic" label="type" variant="filled" defaultValue={LocalDomain.type} /> */}
                            <InputLabel id="demo-simple-select-label">type</InputLabel>
                            <Select
                                labelId="demo"
                                id="type"
                                className={classes.libraryName}
                                value={LocalDomain.type}
                                onChange={event => handleChangeLocalDomain("type",event.target.value)}
                                style = {{width: "300px"}}
                                >
                                <MenuItem value={"spatial_tiled"}>spatial_tiled</MenuItem>
                                <MenuItem value={"spatially_referenced_sql"}>spatially_referenced_sql</MenuItem>
                                <MenuItem value={"spatially_referenced_nosql"}>spatially_referenced_nosql</MenuItem>
                                <MenuItem value={"threaded_spatially_referenced_nosql"}>threaded_spatially_referenced_nosql</MenuItem>
                            </Select>
                        </FormControl>
                        </div>
                </Paper>

            </div>
            <div id="jsonViewer"><pre>
          {JSON.stringify(tempLibrary, null, 2)}
        </pre></div>

        <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success">
          {props.directory+" Saved Successfully!"}
        </Alert>
        </Snackbar>

        </div>
    );
}

DashboardPage = () => {
  const [selectedFacilityId, setSelectedFacilityId] = useState('');
  const [selectedContactId, setSelectedContactId] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [resourceEditId, setResourceEditId] = useState(0);
  const [requests, setRequests] = useState([]);
  const [facilities, setFacilites] = useState([]);
  const [contacts, setContacts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [amount, setAmount] = useState(0);
  const selectedFacility = facilities.find((x) => x.name === selectedFacilityId);
  const selectedContact = contacts.find((x) => x.name === selectedContactId);

  useEffect(() => {
    if (modalOpen) {
      setSelectedFacilityId('');
      setSelectedContactId('');
      setSelectedCategory('');
      setAmount(0);
    } else if (resourceEditId) {
      setTimeout(() => setResourceEditId(0), 50);
    }
  }, [modalOpen]);

  useEffect(() => {
    if (resourceEditId) {
      const {
        name,
        quantity,
        beneficiary,
        contactPerson,
      } = requests.find(({ id }) => id === resourceEditId);

      setSelectedFacilityId(beneficiary.name);
      setSelectedContactId(contactPerson.name);
      setSelectedCategory(name);
      setAmount(quantity);
    }
  }, [resourceEditId]);

  const getData = () => {
    fetch(`${apiUrl}/resources`)
      .then((x) => x.json())
      .then((x) => x.list.filter((a) => a.name))
      .then((x) => {
        setRequests(x);
        const facilitiesX = x
          .reduce((res, next) => res.set(next.beneficiary.name, next.beneficiary), new Map());
        setFacilites([...facilitiesX.values()]);

        const contactsX = x
          .reduce((res, next) => res.set(next.contactPerson.name, next.contactPerson), new Map());
        setContacts([...contactsX.values()]);

        const categoriesX = x
          .reduce((res, next) => res.set(next.name, next.name), new Map());
        setCategories([...categoriesX.values()]);
      });
  };
  const init = useRef(false);
  useEffect(() => {
    if (!init.current) {
      getData();
      init.current = true;
    }
  }, [init]);

  const submit = (modalClose) => {
    const req = {
      beneficiary: selectedFacility,
      contactPerson: selectedContact,
      status: 'OPEN',
      items: [{
        name: selectedCategory,
        quantity: parseInt(amount, 10),
      }],
    };

    /* if (resourceEditId) {
      fetch(`${apiUrl}/resources/${resourceEditId}`, {
        method: 'PUT',
        body: JSON.stringify(req),
      }).then((response) => {
        setRequests(requests.reduce((acc, rowData) => {
          if (rowData.id === resourceEditId) {
            acc.push(response);
          } else {
            acc.push(rowData);
          }

          return acc;
        }), []);
      }).then(() => modalClose())
        .catch((e) => console.log(e));
    } else {
      fetch(`${apiUrl}/resources`, {
        method: 'POST',
        body: JSON.stringify(req),
      }).then((x) => setRequests(x.list.filter((a) => a.name)))
        .then(() => modalClose())
        .catch((e) => console.log(e));
    } */

    // temporarily until the server is implemented
    modalClose();
  };

  return (
    <>
      <Box mb={4} display="flex" justifyContent="space-between">
        <Typography variant="h4">Dashboard</Typography>
        <Button color="primary" variant="contained" onClick={() => setModalOpen(true)}>
          <Icon>add</Icon>
          {' '}
          Create Request
        </Button>
      </Box>
      {/* <Box mb={2}>
        <Paper elevation={2}>
          <Box p={2}>
            <Typography variant="h5" gutterBottom>Filter</Typography>
            <Grid container spacing={2}>
              <Grid item xs>
                <FormControl>
                  <InputLabel>Facility</InputLabel>
                  <Input />
                </FormControl>
              </Grid>
              <Grid item xs>
                <FormControl>
                  <InputLabel>Region</InputLabel>
                  <Input />
                </FormControl>
              </Grid>
              <Grid item xs>
                <FormControl>
                  <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <KeyboardDatePicker label="Deadline" onChange={() => {}} />
                  </MuiPickersUtilsProvider>
                </FormControl>
              </Grid>
            </Grid>
          </Box>
        </Paper>
      </Box> */}
      <Paper elevation={2}>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
            </TableRow>
          </TableHead>
          <TableBody>
            {requests.map((x) => (
              <TableRow key={x.id}>
                <TableCell>{x.beneficiary.name}</TableCell>
                <TableCell>{x.name}</TableCell>
                <TableCell>{x.quantity}</TableCell>
                <TableCell>{x.deadline}</TableCell>
                <TableCell>
                  {x.contactPerson ? x.contactPerson.name : (
                    <Button color="secondary" variant="contained">
                      Assign
                    </Button>
                  )}
                </TableCell>
                <TableCell align="right">
                  <IconButton
                    variant="icon"
                    onClick={() => {
                      setResourceEditId(x.id);
                      setModalOpen(true);
                    }}
                  >
                    <Icon>edit</Icon>
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>

      <Dialog open={modalOpen} fullWidth>
        <DialogTitle>
          {resourceEditId ? 'Update' : 'New'}
          {' '}
          Request
        </DialogTitle>
        <DialogContent>
          <Box mb={2}>
            <FormControl fullWidth>
              <InputLabel>Facility</InputLabel>
              <Select
                value={selectedFacilityId}
                fullWidth
                onChange={({ target: { value } }) => setSelectedFacilityId(value)}
              >
                {facilities.map((x) => <MenuItem key={x.name} value={x.name}>{x.name}</MenuItem>)}
              </Select>
            </FormControl>
            {
              selectedFacilityId
                ? (
                  <>
                    <Typography color="textSecondary" variant="subtitle1">{selectedFacility.name}</Typography>
                    <Typography color="textSecondary" variant="subtitle2">{selectedFacility.address}</Typography>
                  </>
                ) : null
            }
          </Box>
          <Box mb={2}>
            <FormControl fullWidth>
              <InputLabel>Contact person</InputLabel>
              <Select
                value={selectedContactId}
                fullWidth
                onChange={({ target: { value } }) => setSelectedContactId(value)}
              >
                {contacts.map((x) => <MenuItem key={x.name} value={x.name}>{x.name}</MenuItem>)}
              </Select>
            </FormControl>
            {
              selectedContactId
                ? (
                  <>
                    <Typography color="textSecondary" variant="subtitle1">{selectedContact.name}</Typography>
                    <Typography color="textSecondary" variant="subtitle2">{selectedContact.phone}</Typography>
                  </>
                ) : null
            }
          </Box>
          <Typography variant="h6">Request</Typography>
          <Box mb={2}>
            <FormControl fullWidth>
              <InputLabel>Category</InputLabel>
              <Select
                value={selectedCategory}
                fullWidth
                onChange={({ target: { value } }) => setSelectedCategory(value)}
              >
                {categories.map((x) => <MenuItem key={x} value={x}>{x}</MenuItem>)}
              </Select>
            </FormControl>
          </Box>
          <Box mb={2}>
            <FormControl fullWidth>
              <InputLabel>Amount</InputLabel>
              <Input value={amount} onChange={(({ target: { value } }) => setAmount(value))} />
            </FormControl>
          </Box>
          <Box mb={2}>
            <FormControl fullWidth>
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker fullWidth label="Deadline" onChange={() => {}} />
              </MuiPickersUtilsProvider>
            </FormControl>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button
            color="secondary"
            onClick={() => {
              setModalOpen(false);
            }}
          >
            Cancel
          </Button>
          <Button
            variant="contained"
            color="primary"
            onClick={() => {
              submit(() => setModalOpen(false));
            }}
          >
            {resourceEditId ? 'Update' : 'Create'}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

function Dashboard() {
  // Layout and Menu
  const { Content, Sider } = Layout;
  const { SubMenu } = Menu;

  // report an issue preventDefault
  const preventDefault = (event) => {
    event.preventDefault();
    window.location.href =
      "https://github.com/abhishekpatel946/Smart-Vehicle-Fleet-Manager/issues/new/choose";
  };

  // snakbar state
  const [vehicleAddSuccess, setvehicleAddSuccess] = React.useState(false);
  const [vehicleAddError, setvehicleAddError] = React.useState(false);
  const [maintainanceAddSuccess, setmaintainanceAddSuccess] = React.useState(
    false
  );
  const [maintainanceAddError, setmaintainanceAddError] = React.useState(false);
  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setvehicleAddSuccess(false);
    setvehicleAddError(false);
    setmaintainanceAddSuccess(false);
    setmaintainanceAddError(false);
  };

  // vehicleId & vehicleName for addVehicle
  const [vehicleNAME, setVehicleNAME] = useState("");
  const [vehicleID, setVehicleID] = useState("");

  // vehicleName, dateTime & cost for maintenace
  const [vehicleRegNumber, setVehicleRegNumber] = useState("");
  const [date, setDate] = useState(moment().toString());
  const [cost, setCost] = useState("");

  // set date
  const onDateChange = (val) => {
    setDate(val);
  };

  const [collapseState, setCollapseState] = useState(false);
  const onCollapse = (collapsed) => {
    setCollapseState({ collapsed });
  };

  // form onSubmit handler
  const submitHandler = (event) => {
    event.preventDefault();
    event.target.className += " was-validated";
  };

  // fetch vehicle model & regid
  // const [vehicleInfo, setVehicleInfo] = useState([]);
  // let vehicleModel = "";
  // let vehicleModelId = "";
  // db.collection("data")
  //   .doc("MP10ME7969")
  //   .get()
  //   .then((snapshot) => {
  //     const currentInfo = [];
  //     snapshot.forEach((doc) => {
  //       currentInfo.push(doc.data());
  //     });
  //     setVehicleInfo(currentInfo);
  //   });
  // vehicleInfo.forEach((data) => {
  //   vehicleModel = data.vehicleId;
  //   vehicleModelId = data.vehicleName;
  // });

  // fetch moduleState
  const [moduleState, setModuleState] = useState([]);
  let liveState = false;
  db.collection("data")
    .doc("MP10ME7969")
    .collection("module_state")
    .onSnapshot((docs) => {
      const currentState = [];
      docs.forEach((doc) => {
        currentState.push(doc.data());
      });
      setModuleState(currentState);
    });

  moduleState.forEach((data) => {
    liveState = data.state;
  });

  // form vehicleRegister submitHandler
  const vehicleRegister = (event) => {
    if (vehicleID && vehicleNAME) {
      // check if the doc are already available in the DB... then just give the warning to the user!

      // create a doc in DB with vehicleID and set it fields
      db.collection("data").doc(vehicleID).set({
        vehicleId: vehicleID,
        vehicleName: vehicleNAME,
      });

      // create a dummy collection for newly created vehicleID
      db.collection("data").doc(vehicleID).collection("fuel").doc().set({
        id: "0",
        amount: "0",
        timestamp: "0",
      });
      db.collection("data").doc(vehicleID).collection("fuel_refill").doc().set({
        id: "0",
        amount: "0",
        timestamp: "0",
      });
      db.collection("data")
        .doc(vehicleID)
        .collection("maintainance")
        .doc()
        .set({
          id: "0",
          amount: "0",
          timestamp: "0",
        });
      db.collection("data").doc(vehicleID).collection("overspeed").doc().set({
        id: "0",
        speed: "0",
        timestamp: "0",
      });
      db.collection("data").doc(vehicleID).collection("speed").doc().set({
        id: "0",
        speed: "0",
        timestamp: "0",
      });
      db.collection("data")
        .doc(vehicleID)
        .collection("accident_alert")
        .doc()
        .set({
          id: "0",
          accident: "0",
          geolocation_lat: "0",
          geolocation_long: "0",
          timestamp: "0",
        });
      db.collection("data")
        .doc(vehicleID)
        .collection("fuel_theft_alert")
        .doc()
        .set({
          id: "0",
          fuelTheft: "0",
          geolocation_lat: "0",
          geolocation_long: "0",
          timestamp: "0",
        });
      db.collection("data")
        .doc(vehicleID)
        .collection("module_state")
        .doc()
        .set({
          state: "0",
        });

      // success mgs for the all are right
      setvehicleAddError(false);
      setmaintainanceAddSuccess(false);
      setmaintainanceAddError(false);
      setvehicleAddSuccess(true);

      // set it to defualt to state
      setVehicleNAME("");
      setVehicleID("");
    } else {
      // alert("Both the fields are mandatory!!!");
      setvehicleAddSuccess(false);
      setmaintainanceAddSuccess(false);
      setmaintainanceAddError(false);
      setvehicleAddError(true);
    }
  };

  // from vehicleMaintenace submitHandler
  const addCost = (event) => {
    // store maintainance-cost into database
    db.collection("data")
      .doc(vehicleRegNumber)
      .collection("maintainance")
      .add({
        id: vehicleRegNumber,
        cose: cost,
        timestamp: date,
      })
      .then(function () {
        // success mgs for the all are right
        setvehicleAddSuccess(false);
        setvehicleAddError(false);
        setmaintainanceAddError(false);
        setmaintainanceAddSuccess(true);
      })
      .catch(function (error) {
        setvehicleAddSuccess(false);
        setvehicleAddError(false);
        setmaintainanceAddSuccess(false);
        setmaintainanceAddError(true);
      });
  };

  // render() {
  return (
    <Layout id="header">
      {/* Header Section */}
      <HeaderLayout className="header" />
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={collapseState.collapsed}
          onCollapse={onCollapse}
        >
          <div className="logo" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["stats"]}
            defaultOpenKeys={["track"]}
            mode="inline"
          >
            <Menu.Item key="stats" icon={<PieChartOutlined />}>
              Stats
            </Menu.Item>
            <SubMenu key="track" icon={<DesktopOutlined />} title="Track">
              <Menu.Item key="speed">
                <Link href="#speedSection">Speed</Link>
              </Menu.Item>
              <Menu.Item key="fuel">
                <Link href="#fuelSection">Fuel</Link>
              </Menu.Item>
              <Menu.Item key="fuel_refill">
                <Link href="#fuelRefillSection">Fuel Refill</Link>
              </Menu.Item>
              <Menu.Item key="overspeeding">
                <Link href="#overSpeedingSection">OverSpeeding</Link>
              </Menu.Item>
              <Menu.Item key="maintainance">
                <Link href="#maintainanceSection">Maintainance</Link>
              </Menu.Item>
            </SubMenu>
            <Menu.Item
              key="accidentAlert"
              icon={<NotificationsActiveOutlinedIcon />}
            >
              <Link href="#accidentAlertSection">Accident alert</Link>
            </Menu.Item>
            <Menu.Item
              key="fuelTheftAlert"
              icon={<NotificationImportantIcon />}
            >
              <Link href="#fuelTheftAlertSection">FuelTheft alert</Link>
            </Menu.Item>
            <Menu.Item key="addVehicle" icon={<LocalTaxiIcon />}>
              <Link href="#addVehicleSection">Add Vehicle</Link>
            </Menu.Item>
            <Menu.Item key="addMaintainance" icon={<PostAddIcon />}>
              <Link href="#addVehicleSection">Add Maintainance</Link>
            </Menu.Item>
            <Menu.Item key="reportIssue" icon={<ReportProblemOutlinedIcon />}>
              <Link
                href="https://github.com/abhishekpatel946/Smart-Vehicle-Fleet-Manager/issues/new/choose"
                onClick={preventDefault}
              >
                Report an issue
              </Link>
            </Menu.Item>
          </Menu>
        </Sider>

        {/* Breadcrum Naming */}
        <Layout className="site-layout">
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
              <div>
                <p className="h6 text-left mb-1">
                  Status : {liveState ? "Active" : "Inactive"}
                  {/* {vehicleModel}
                  {vehicleModelId} */}
                </p>
              </div>
            </Breadcrumb>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 560 }}
            >
              {/* Speed Section */}
              <Divider orientation="left" id="speedSection">
                Speed area
              </Divider>
              <MDBContainer>
                <SpeedLog />
              </MDBContainer>

              {/* Fuel Section */}
              <Divider orientation="left" id="fuelSection">
                Fuel area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelLog />
                </MDBRow>
              </MDBContainer>

              {/* OverSpeeding Section */}
              <Divider orientation="left" id="overSpeedingSection">
                OverSpeeding area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <OverSpeedLog />
                </MDBRow>
              </MDBContainer>

              {/* Fuel Refill Section */}
              <Divider orientation="left" id="fuelRefillSection">
                Fuel Refill area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelRefillLog />
                </MDBRow>
              </MDBContainer>

              {/* Maintainence Section */}
              <Divider orientation="left" id="maintainanceSection">
                Maintainance area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <MaintainenceLog />
                </MDBRow>
              </MDBContainer>

              {/* Accident Section */}
              <Divider orientation="left" id="accidentAlertSection">
                Accident Alert area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <AccidentAlert />
                </MDBRow>
              </MDBContainer>

              {/* FuelTheft Section */}
              <Divider orientation="left" id="fuelTheftAlertSection">
                FuelTheft Alert area
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <FuelTheftAlert />
                </MDBRow>
              </MDBContainer>

              {/* addVehicle Section */}
              <Divider orientation="left" id="addVehicleSection">
                Add Vehicle
              </Divider>
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="6">
                    <form
                      className="needs-validation"
                      onSubmit={submitHandler}
                      noValidate
                    >
                      <p className="h5 text-center mb-4">Register Vehicle</p>
                      <div className="grey-text">
                        <MDBInput
                          className="addVehicle_vehicleNAME"
                          name="vehicleNAME"
                          onChange={(event) =>
                            setVehicleNAME(event.target.value)
                          }
                          value={vehicleNAME}
                          label="Your vehicle name"
                          icon="car"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                        <MDBInput
                          className="addVehicle_vehicleID"
                          name="vehicleID"
                          onChange={(event) => setVehicleID(event.target.value)}
                          value={vehicleID}
                          label="Your vechile reg. number"
                          icon="registered"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                      </div>
                      <div className="text-center">
                        <MDBBtn outline type="submit" onClick={vehicleRegister}>
                          Register
                          <MDBIcon className="ml-1" />
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCol>
                  <MDBCol md="6">
                    <form
                      className="needs-validation"
                      onSubmit={submitHandler}
                      noValidate
                    >
                      <p className="h5 text-center mb-4">
                        Register Maintainance
                      </p>
                      <div className="grey-text">
                        <MDBInput
                          className="addVehicle_vehicleNAME"
                          name="vehicleName"
                          onChange={(event) =>
                            setVehicleRegNumber(event.target.value)
                          }
                          value={vehicleRegNumber}
                          label="Your vehicle Reg number"
                          icon="registered"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                        <div>
                          <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDatePicker
                              disableToolbar
                              fullWidth
                              variant="inline"
                              format="dd/MM/yyyy"
                              margin="normal"
                              id="date-picker-inline"
                              label="DD/MM/YYYY"
                              value={date}
                              onChange={onDateChange}
                              KeyboardButtonProps={{
                                "aria-label": "change date",
                              }}
                            />
                          </MuiPickersUtilsProvider>
                        </div>
                        <MDBInput
                          className="addVehicle_vehicleID"
                          name="cost"
                          onChange={(event) => setCost(event.target.value)}
                          value={cost}
                          label="Your mainatenace cost..."
                          icon="rupee-sign"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          required
                        />
                      </div>
                      <div className="text-center">
                        <MDBBtn outline type="submit" onClick={addCost}>
                          Add Cost
                          <MDBIcon className="ml-1" />
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>

              {/* back to top */}
              <Link href="#header">
                <Button
                  // ghost
                  icon={<NavigationIcon />}
                  style={{
                    float: "right",
                    margin: "auto 20px 10px 20px",
                  }}
                >
                  {" "}
                  Back to top{" "}
                </Button>
              </Link>

              {/* End */}
            </div>
          </Content>

          {/* snakbar notifiers */}
          <Snackbar
            open={vehicleAddSuccess}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="success">
              Vehicle added successfully.
            </Alert>
          </Snackbar>
          <Snackbar
            open={vehicleAddError}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="error">
              All the field's are mendatory!!!
            </Alert>
          </Snackbar>
          <Snackbar
            open={maintainanceAddSuccess}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="success">
              Maintainance added successfully.
            </Alert>
          </Snackbar>
          <Snackbar
            open={maintainanceAddError}
            autoHideDuration={3000}
            onClose={handleClose}
          >
            <Alert onClose={handleClose} severity="error">
              All the field's are mendatory!!!
            </Alert>
          </Snackbar>

          {/* footer */}
          <FooterLayout />
        </Layout>
      </Layout>
    </Layout>
  );
}

render() {
    
    function Alert(props) {
      return <MuiAlert elevation={6} variant="filled" {...props} />;
    }

    const {sched} = data;
    const fin = localStorage.getItem("language");
    
    return (
      <div className="schedulingRoot">
        <Modal open={this.state.state!=='ready'?true:false} onClick={this.handleBackdropClick}>
          <Backdrop open={this.state.state!=='ready'?true:false} onClick={this.handleBackdropClick}>
            <CircularProgress disableShrink />
          </Backdrop>
        </Modal>

        {/* Section for selecting date */}
        <div className="firstSection">
          <form onSubmit={this.continueWithDate}>

            { /* Datepicker */}
            <MuiPickersUtilsProvider utils={MomentUtils} locale={lang} key={this.state.datePickerKey}>
              <KeyboardDatePicker
                autoOk
                margin="normal"
                name="date"
                label={sched.Day[fin]}
                value={this.state.date}
                onChange={date => this.handleDateChange(date)}
                onAccept={this.handleDatePickChange}
                format="DD.MM.YYYY"
                showTodayButton
              />
            </MuiPickersUtilsProvider>
            <div className="continue">
              <Button type="submit" variant="contained" style={{backgroundColor:'#d1ccc2'}}>{sched.Day[fin]}</Button>
            </div>
          </form>
        </div>

        <hr/>

        {/* Section for setting range officer status and open/close times of the tracks */}
        <div className="secondSection">
          <div className="topRow">
            <div className="text">{sched.Open[fin]}</div>

	    <Switch
              checked={ this.state.available }
              onChange={this.handleSwitchChange}
              name="available"
              color="primary"
              style={{color:'#5f77a1'}} />
          </div>
          <div className="middleRow">
            <div className="roSwitch">
              <div className="text">{sched.Supervisor[fin]}</div>
              <Switch
                className="officerSwitch"
                checked={this.state.rangeSupervisorSwitch}
                onChange={this.handleSwitchChange}
                name="rangeSupervisorSwitch"
                color="primary"
                style={{color:'#5f77a1'}} />
            </div>
            {this.createSupervisorSelect()}
          </div>
          <div className="bottomRow">
            <div className="text">{sched.OpenHours[fin]}</div>
            <MuiPickersUtilsProvider utils={MomentUtils} locale={'fi'}>
              <KeyboardTimePicker
                autoOk
                ampm={false}
                margin="normal"
                name="start"
                label={sched.Start[fin]}
                value={this.state.open}
                onChange={this.handleTimeStartChange}
                minutesStep={5}
                showTodayButton
              />
            </MuiPickersUtilsProvider>
            <div className="dash">-</div>
            <MuiPickersUtilsProvider utils={MomentUtils} locale={'fi'}>
              <KeyboardTimePicker
                autoOk
                ampm={false}
                margin="normal"
                name="end"
                label={sched.Stop[fin]}
                value={this.state.close}
                onChange={this.handleTimeEndChange}
                minutesStep={5}
                showTodayButton
              />
            </MuiPickersUtilsProvider>
          </div>
        </div>

        <hr/>

        {/* Section for setting track-specific open/close/absent statuses */}
        <div className="thirdSection">
          <div className="leftSide">
            {this.createTrackList()}
          </div>
          <div className="rightSide">
            <Button variant="contained" color="primary" onClick={this.openAllTracks} style={{color:'black', backgroundColor:'#5f77a1'}}>{sched.OpenAll[fin]}</Button>
            <Button variant="contained" onClick={this.emptyAllTracks} style={{backgroundColor:'#d1ccc2'}}>{sched.ClearAll[fin]}</Button>
        <Button variant="contained" color="secondary" onClick={this.closeAllTracks} style={{color:'black', backgroundColor:'#c97b7b'}}>{sched.CloseAll[fin]}</Button>
          </div>
        </div>
        <hr/>
        <div className="fourthSection">
          <div className="repetition">
            <div className="daily">
              {sched.RepeatDaily[fin]}
              <Switch
                checked={ this.state.daily }
                onChange={this.handleRepeatChange}
                id='daily'
                color="primary"
                style={{color:'#5f77a1'}}
              />
            </div>
            <div className="weekly">
              {sched.RepeatWeekly[fin]}
              <Switch
                checked={ this.state.weekly }
                onChange={this.handleRepeatChange}
                id='weekly'
                color="primary"
                style={{color:'#5f77a1'}}
              />
            </div>
            <div className="monthly">
              {sched.RepeatMonthly[fin]}
              <Switch
                checked={ this.state.monthly }
                onChange={this.handleRepeatChange}
                id='monthly'
                color="primary"
                style={{color:'#5f77a1'}}
              />
            </div>
            <div className="repeatCount">
              {sched.Amount[fin]}
              <TextField 
                name="repeatCount"
                type="number" 
                value={this.state.repeatCount} 
                onChange={this.handleValueChange}
                InputProps={{ inputProps: { min: 1, max: 100 } }}
              />
            </div>
          </div>
          <div className="save">
            <Button variant="contained" onClick={this.saveChanges} style={{backgroundColor:'#d1ccc2'}}>{sched.Save[fin]}</Button>
            <div
              className="hoverHand arrow-right"
              onClick={() => this.handleDatePickChange(moment(this.state.date).add(1, 'days').format('YYYY-MM-DD'))}
            ></div>
            <div className="toast">
              <Snackbar open={this.state.toast} autoHideDuration={5000} onClose={this.handleSnackbarClose}>
                <Alert onClose={this.handleSnackbarClose} severity={this.state.toastSeverity}>
                  {this.state.toastMessage}!
                </Alert>
              </Snackbar>
            </div>
          </div>
        </div>
      </div>
      
    );
  }

function Filter(props) {
  // console.log('render: filter top');
  const speciesContext = useContext(SpeciesContext);
  const tagsContext = useContext(TagsContext);
  const { classes, filter = new FilterModel() } = props;
  const filterOptionAll = 'All';
  const dateStartDefault = null;
  const dateEndDefault = null;
  const [uuid, setUUID] = useState(filter?.uuid || '');
  const [captureId, setCaptureId] = useState(filter?.captureId || '');
  const [growerId, setGrowerId] = useState(filter?.planterId || '');
  const [deviceId, setDeviceId] = useState(filter?.deviceIdentifier || '');
  const [growerIdentifier, setGrowerIdentifier] = useState(
    filter?.planterIdentifier || ''
  );
  const [approved, setApproved] = useState(filter?.approved);
  const [active, setActive] = useState(filter?.active);
  const [dateStart, setDateStart] = useState(
    filter?.dateStart || dateStartDefault
  );
  const [dateEnd, setDateEnd] = useState(filter?.dateEnd || dateEndDefault);
  const [speciesId, setSpeciesId] = useState(filter?.speciesId || ALL_SPECIES);
  const [tag, setTag] = useState(null);
  const [tagSearchString, setTagSearchString] = useState('');
  const [organizationId, setOrganizationId] = useState(
    filter.organizationId || ALL_ORGANIZATIONS
  );
  const [stakeholderUUID, setStakeholderUUID] = useState(
    filter.stakeholderUUID || ALL_ORGANIZATIONS
  );
  const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);

  const handleDateStartChange = (date) => {
    setDateStart(date);
  };

  const handleDateEndChange = (date) => {
    setDateEnd(date);
  };

  const formatDate = (date) => {
    return convertDateToDefaultSqlDate(date);
  };

  function handleSubmit(e) {
    e.preventDefault();
    // save the filer to context for editing & submit
    const filter = new FilterModel();
    filter.uuid = uuid;
    filter.captureId = captureId;
    filter.planterId = growerId;
    filter.deviceIdentifier = deviceId;
    filter.planterIdentifier = growerIdentifier;
    filter.dateStart = dateStart ? formatDate(dateStart) : undefined;
    filter.dateEnd = dateEnd ? formatDate(dateEnd) : undefined;
    filter.approved = approved;
    filter.active = active;
    filter.speciesId = speciesId;
    filter.tagId = tag ? tag.id : 0;
    filter.organizationId = organizationId;
    filter.stakeholderUUID = stakeholderUUID;
    filter.tokenId = tokenId;
    props.onSubmit && props.onSubmit(filter);
  }

  function handleReset() {
    // reset form values, except 'approved' and 'active' which we'll keep
    setUUID('');
    setCaptureId('');
    setGrowerId('');
    setDeviceId('');
    setGrowerIdentifier('');
    setDateStart(dateStartDefault);
    setDateEnd(dateEndDefault);
    setSpeciesId(ALL_SPECIES);
    setTag(null);
    setTagSearchString('');
    setOrganizationId(ALL_ORGANIZATIONS);
    setStakeholderUUID(ALL_ORGANIZATIONS);
    setTokenId(filterOptionAll);

    const filter = new FilterModel();
    filter.approved = approved; // keeps last value set
    filter.active = active; // keeps last value set
    props.onSubmit && props.onSubmit(filter);
  }

  return (
    <>
      {
        <form onSubmit={handleSubmit}>
          <Grid container wrap="nowrap" direction="row">
            <Grid item className={classes.inputContainer}>
              <TextField
                select
                htmlFor="verification-status"
                id="verification-status"
                label="Verification Status"
                value={
                  active === undefined && approved === undefined
                    ? filterOptionAll
                    : getVerificationStatus(active, approved)
                }
                onChange={(e) => {
                  setApproved(
                    e.target.value === filterOptionAll
                      ? undefined
                      : e.target.value === verificationStates.AWAITING ||
                        e.target.value === verificationStates.REJECTED
                      ? false
                      : true
                  );
                  setActive(
                    e.target.value === filterOptionAll
                      ? undefined
                      : e.target.value === verificationStates.AWAITING ||
                        e.target.value === verificationStates.APPROVED
                      ? true
                      : false
                  );
                }}
              >
                {[
                  filterOptionAll,
                  verificationStates.APPROVED,
                  verificationStates.AWAITING,
                  verificationStates.REJECTED,
                ].map((name) => (
                  <MenuItem key={name} value={name}>
                    {name}
                  </MenuItem>
                ))}
              </TextField>
              <TextField
                select
                htmlFor="token-status"
                id="token-status"
                label="Token Status"
                value={tokenId}
                onChange={(e) => {
                  setTokenId(e.target.value);
                }}
              >
                {[
                  filterOptionAll,
                  tokenizationStates.NOT_TOKENIZED,
                  tokenizationStates.TOKENIZED,
                ].map((name) => (
                  <MenuItem key={name} value={name}>
                    {name}
                  </MenuItem>
                ))}
              </TextField>
              <MuiPickersUtilsProvider
                utils={DateFnsUtils}
                locale={getDatePickerLocale()}
              >
                <KeyboardDatePicker
                  margin="normal"
                  id="start-date-picker"
                  htmlFor="start-date-picker"
                  label="Start Date"
                  format={getDateFormatLocale(true)}
                  value={dateStart}
                  onChange={handleDateStartChange}
                  maxDate={dateEnd || Date()} // Don't allow selection after today
                  KeyboardButtonProps={{
                    'aria-label': 'change date',
                  }}
                />
                <KeyboardDatePicker
                  margin="normal"
                  id="end-date-picker"
                  htmlFor="end-date-picker"
                  label="End Date"
                  format={getDateFormatLocale(true)}
                  value={dateEnd}
                  onChange={handleDateEndChange}
                  minDate={dateStart || datePickerDefaultMinDate}
                  maxDate={Date()} // Don't allow selection after today
                  KeyboardButtonProps={{
                    'aria-label': 'change date',
                  }}
                />
              </MuiPickersUtilsProvider>
              <TextField
                htmlFor="grower-id"
                id="grower-id"
                label="Grower ID"
                placeholder="e.g. 7"
                value={growerId}
                onChange={(e) => setGrowerId(e.target.value)}
              />
              <TextField
                htmlFor="capture-id"
                id="capture-id"
                label="Capture ID"
                placeholder="e.g. 80"
                value={captureId}
                onChange={(e) => setCaptureId(e.target.value)}
              />
              <TextField
                htmlFor="uuid"
                id="uuid"
                label="Capture UUID"
                placeholder=""
                value={uuid}
                onChange={(e) => setUUID(e.target.value)}
              />
              <TextField
                htmlFor="device-identifier"
                id="device-identifier"
                label="Device Identifier"
                placeholder="e.g. 1234abcd"
                value={deviceId}
                onChange={(e) => setDeviceId(e.target.value)}
              />
              <TextField
                htmlFor="grower-identifier"
                id="grower-identifier"
                label="Grower Identifier"
                placeholder="e.g. [email protected]"
                value={growerIdentifier}
                onChange={(e) => setGrowerIdentifier(e.target.value)}
              />
              <TextField
                data-testid="species-dropdown"
                select
                htmlFor="species"
                id="species"
                label="Species"
                value={speciesId}
                onChange={(e) => setSpeciesId(e.target.value)}
              >
                {speciesContext.isLoading ? (
                  <CircularProgress />
                ) : (
                  [
                    { id: ALL_SPECIES, name: 'All' },
                    {
                      id: SPECIES_NOT_SET,
                      name: 'Not set',
                    },
                    ...speciesContext.speciesList,
                  ].map((species) => (
                    <MenuItem
                      data-testid="species-item"
                      key={species.id}
                      value={species.id}
                    >
                      {species.name}
                    </MenuItem>
                  ))
                )}
              </TextField>
              <Autocomplete
                data-testid="tag-dropdown"
                label="Tag"
                htmlFor="tag"
                id="tag"
                classes={{
                  inputRoot: classes.autocompleteInputRoot,
                }}
                options={[
                  {
                    id: TAG_NOT_SET,
                    tagName: 'Not set',
                    active: true,
                    public: true,
                  },
                  {
                    id: ANY_TAG_SET,
                    tagName: 'Any tag set',
                    active: true,
                    public: true,
                  },
                  ...tagsContext.tagList.filter((t) =>
                    t.tagName
                      .toLowerCase()
                      .startsWith(tagSearchString.toLowerCase())
                  ),
                ]}
                value={tag}
                defaultValue={'Not set'}
                getOptionLabel={(tag) => {
                  // if (tag === 'Not set') {
                  //   return 'Not set';
                  // }
                  return tag.tagName;
                }}
                onChange={(_oldVal, newVal) => {
                  //triggered by onInputChange
                  console.log('newVal -- ', newVal);
                  setTag(newVal);
                }}
                onInputChange={(_oldVal, newVal) => {
                  setTagSearchString(newVal);
                }}
                renderInput={(params) => {
                  return <TextField {...params} label="Tag" />;
                }}
                getOptionSelected={(option, value) => option.id === value.id}
                // selectOnFocus
                // clearOnBlur
                // handleHomeEndKeys
              />
              <SelectOrg
                orgId={organizationId}
                handleSelection={(org) => {
                  setStakeholderUUID(org.stakeholder_uuid);
                  setOrganizationId(org.id);
                }}
              />
            </Grid>
            <Grid className={classes.inputContainer}>
              <Button
                className={classes.apply}
                type="submit"
                label="submit"
                htmlFor="submit"
                id="submit"
                variant="outlined"
                color="primary"
                onClick={(e) => handleSubmit(e)}
              >
                Apply
              </Button>
              <Button
                className={classes.apply}
                label="reset"
                htmlFor="reset"
                id="reset"
                variant="outlined"
                color="primary"
                onClick={handleReset}
              >
                Reset
              </Button>
            </Grid>
          </Grid>
        </form>
      }
    </>
  );
}

function Filter(props) {
  const { classes, filter } = props;
  // console.log('filter', filter);
  const filterOptionAll = 'All';
  const dateStartDefault = null;
  const dateEndDefault = null;
  const [captureId, setCaptureId] = useState(filter?.captureId || '');
  const [growerId, setGrowerId] = useState(filter?.planterId || '');
  const [deviceIdentifier, setDeviceIdentifier] = useState(
    filter?.deviceIdentifier || '',
  );
  const [growerIdentifier, setGrowerIdentifier] = useState(
    filter?.planterIdentifier || '',
  );
  const [status, setStatus] = useState(filter?.status);
  const [approved, setApproved] = useState(filter?.approved);
  const [active, setActive] = useState(filter?.active);
  const [dateStart, setDateStart] = useState(
    filter?.dateStart || dateStartDefault,
  );
  const [dateEnd, setDateEnd] = useState(filter?.dateEnd || dateEndDefault);
  const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);

  const handleDateStartChange = (date) => {
    setDateStart(date);
  };

  const handleDateEndChange = (date) => {
    setDateEnd(date);
  };

  const formatDate = (date) => {
    return convertDateToDefaultSqlDate(date);
  };

  function handleCloseClick() {
    props.onClose && props.onClose();
  }

  function handleSubmit(e) {
    e.preventDefault();
    const filter = new FilterModel();
    filter.captureId = captureId;
    filter.planterId = growerId;
    filter.deviceIdentifier = deviceIdentifier;
    filter.planterIdentifier = growerIdentifier;
    filter.dateStart = dateStart ? formatDate(dateStart) : undefined;
    filter.dateEnd = dateEnd ? formatDate(dateEnd) : undefined;
    filter.approved = approved;
    filter.active = active;
    filter.tokenId = tokenId;
    filter.status = status;
    props.onSubmit && props.onSubmit(filter);
  }

  function handleClear() {
    setCaptureId('');
    setGrowerId('');
    setDeviceIdentifier('');
    setGrowerIdentifier('');
    setDateStart(dateStartDefault);
    setDateEnd(dateEndDefault);
    setApproved();
    setActive();
    setTokenId(filterOptionAll);
    setStatus('All');

    const filter = new FilterModel();
    props.onSubmit && props.onSubmit(filter);
  }

  return (
    <Drawer
      className={classes.drawer}
      classes={{
        paper: classes.drawerPaper,
      }}
      open={props.isOpen}
      variant="persistent"
      anchor="right"
      PaperProps={{
        elevation: props.isOpen ? 6 : 0,
      }}
    >
      <Grid container justify="space-between">
        <Grid item>
          <Typography variant="h5">Filters</Typography>
        </Grid>
        {props.onClose && (
          <Grid item>
            <IconButton
              color="primary"
              classes={{
                colorPrimary: classes.close,
              }}
              onClick={handleCloseClick}
            >
              <IconClose />
            </IconButton>
          </Grid>
        )}
      </Grid>
      <Button variant="outlined" color="primary" onClick={handleSubmit}>
        Apply Filters
      </Button>
      <Button
        variant="outlined"
        color="primary"
        onClick={handleClear}
        className={classNames(classes.button)}
      >
        Clear Filters
      </Button>
      <GSInputLabel text="Capture ID" />
      <TextField
        placeholder="e.g. 80"
        InputLabelProps={{
          shrink: true,
        }}
        value={captureId}
        onChange={(e) => setCaptureId(e.target.value)}
      />
      <GSInputLabel text="Grower ID" />
      <TextField
        placeholder="grower id"
        InputLabelProps={{
          shrink: true,
        }}
        value={growerId}
        onChange={(e) => setGrowerId(e.target.value)}
      />
      <GSInputLabel text="Device Identifier" />
      <TextField
        placeholder="device identifier"
        InputLabelProps={{
          shrink: true,
        }}
        value={deviceIdentifier}
        onChange={(e) => setDeviceIdentifier(e.target.value)}
      />
      <GSInputLabel text="Grower Identifier" />
      <TextField
        placeholder="grower identifier"
        InputLabelProps={{
          shrink: true,
        }}
        value={growerIdentifier}
        onChange={(e) => setGrowerIdentifier(e.target.value)}
      />
      <GSInputLabel text="Verification Status" />
      <TextField
        select
        value={
          active === undefined && approved === undefined
            ? filterOptionAll
            : getVerificationStatus(active, approved)
        }
        onChange={(e) => {
          setApproved(
            e.target.value === filterOptionAll
              ? undefined
              : e.target.value === verificationStates.AWAITING ||
                e.target.value === verificationStates.REJECTED
              ? false
              : true,
          );
          setActive(
            e.target.value === filterOptionAll
              ? undefined
              : e.target.value === verificationStates.AWAITING ||
                e.target.value === verificationStates.APPROVED
              ? true
              : false,
          );
        }}
      >
        {[
          filterOptionAll,
          verificationStates.APPROVED,
          verificationStates.AWAITING,
          verificationStates.REJECTED,
        ].map((name) => (
          <MenuItem key={name} value={name}>
            {name}
          </MenuItem>
        ))}
      </TextField>
      <GSInputLabel text="Token Status" />
      <TextField
        select
        value={tokenId}
        onChange={(e) => {
          setTokenId(e.target.value);
        }}
      >
        {[
          filterOptionAll,
          tokenizationStates.NOT_TOKENIZED,
          tokenizationStates.TOKENIZED,
        ].map((name) => (
          <MenuItem key={name} value={name}>
            {name}
          </MenuItem>
        ))}
      </TextField>
      <GSInputLabel text="Time created" />
      <MuiPickersUtilsProvider
        utils={DateFnsUtils}
        locale={getDatePickerLocale()}
      >
        <Grid container justify="space-between">
          <KeyboardDatePicker
            margin="normal"
            id="start-date-picker"
            label="Start Date"
            value={dateStart}
            onChange={handleDateStartChange}
            format={getDateFormatLocale(true)}
            maxDate={dateEnd || Date()} // Don't allow selection after today
            KeyboardButtonProps={{
              'aria-label': 'change date',
            }}
            className={classes.dateInput}
          />
          <KeyboardDatePicker
            margin="normal"
            id="end-date-picker"
            label="End Date"
            value={dateEnd}
            onChange={handleDateEndChange}
            format={getDateFormatLocale(true)}
            minDate={dateStart || datePickerDefaultMinDate}
            maxDate={Date()} // Don't allow selection after today
            KeyboardButtonProps={{
              'aria-label': 'change date',
            }}
            className={classes.dateInput}
          />
        </Grid>
      </MuiPickersUtilsProvider>
    </Drawer>
  );
}

function Filter(props) {
  const speciesContext = useContext(SpeciesContext);
  const tagsContext = useContext(TagsContext);
  const { classes, filter = new FilterModel() } = props;
  const filterOptionAll = 'All';
  const dateStartDefault = null;
  const dateEndDefault = null;
  const [uuid, setUUID] = useState(filter?.uuid || '');
  const [captureId, setCaptureId] = useState(filter?.captureId || '');
  const [growerId, setGrowerId] = useState(filter?.planterId || '');
  const [deviceId, setDeviceId] = useState(filter?.deviceIdentifier || '');
  const [growerIdentifier, setGrowerIdentifier] = useState(
    filter?.planterIdentifier || ''
  );
  const [verifyStatus, setVerifyStatus] = useState([
    { active: true, approved: true },
    { active: true, approved: false },
  ]);
  const [dateStart, setDateStart] = useState(
    filter?.dateStart || dateStartDefault
  );
  const [dateEnd, setDateEnd] = useState(filter?.dateEnd || dateEndDefault);
  const [speciesId, setSpeciesId] = useState(filter?.speciesId || ALL_SPECIES);
  const [tag, setTag] = useState(null);
  const [tagSearchString, setTagSearchString] = useState('');
  const [organizationId, setOrganizationId] = useState(
    filter.organizationId || ALL_ORGANIZATIONS
  );
  const [stakeholderUUID, setStakeholderUUID] = useState(
    filter.stakeholderUUID || ALL_ORGANIZATIONS
  );
  const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);
  const [verificationStatus, setVerificationStatus] = useState([
    verificationStates.APPROVED,
    verificationStates.AWAITING,
  ]);
  const isAllVerification =
    verificationStatus.length &&
    verificationStatus.length === verificationStatesArr.length;

  const handleDateStartChange = (date) => {
    setDateStart(date);
  };

  const handleDateEndChange = (date) => {
    setDateEnd(date);
  };

  const formatDate = (date) => {
    return convertDateToDefaultSqlDate(date);
  };

  const handleVerificationStatusChange = (event) => {
    let value = event.target.value;
    let status = [];
    if (
      value[value.length - 1] === 'all' ||
      (value.length === 3 && value[value.length - 1] !== 'all')
    ) {
      setVerificationStatus(
        verificationStatus.length === verificationStatesArr.length
          ? []
          : verificationStatesArr
      );
      value = verificationStatesArr;
    } else {
      setVerificationStatus(value);
    }
    value.forEach((val) => {
      if (val === verificationStates.APPROVED) {
        status.push({ active: true, approved: true });
      } else if (val === verificationStates.AWAITING) {
        status.push({ active: true, approved: false });
      } else if (val === verificationStates.REJECTED) {
        status.push({ active: false, approved: false });
      }
    });
    setVerifyStatus(status);
  };

  function handleSubmit(e) {
    e.preventDefault();
    // save the filer to context for editing & submit
    const filter = new FilterModel();
    filter.uuid = uuid;
    filter.captureId = captureId;
    filter.planterId = growerId;
    filter.deviceIdentifier = deviceId;
    filter.planterIdentifier = growerIdentifier;
    filter.dateStart = dateStart ? formatDate(dateStart) : undefined;
    filter.dateEnd = dateEnd ? formatDate(dateEnd) : undefined;
    filter.speciesId = speciesId;
    filter.tagId = tag ? tag.id : 0;
    filter.organizationId = organizationId;
    filter.stakeholderUUID = stakeholderUUID;
    filter.tokenId = tokenId;
    filter.verifyStatus = verifyStatus;
    props.onSubmit && props.onSubmit(filter);
  }

  function handleReset() {
    // reset form values, except 'approved' and 'active' which we'll keep
    setUUID('');
    setCaptureId('');
    setGrowerId('');
    setDeviceId('');
    setGrowerIdentifier('');
    setDateStart(dateStartDefault);
    setDateEnd(dateEndDefault);
    setSpeciesId(ALL_SPECIES);
    setTag(null);
    setTagSearchString('');
    setOrganizationId(ALL_ORGANIZATIONS);
    setStakeholderUUID(ALL_ORGANIZATIONS);
    setTokenId(filterOptionAll);
    setVerifyStatus([
      { active: true, approved: true },
      { active: true, approved: false },
    ]);
    const filter = new FilterModel();
    props.onSubmit && props.onSubmit(filter);
  }

  return (
    <>
      {
        <form onSubmit={handleSubmit}>
          <Grid container wrap="nowrap" direction="row">
            <Grid item className={classes.inputContainer}>
              <TextField
                select
                htmlFor="verification-status"
                id="verification-status"
                label="Verification Status"
                SelectProps={{
                  multiple: true,
                  value: verificationStatus,
                  onChange: handleVerificationStatusChange,
                  renderValue: (verificationStatus) =>
                    verificationStatus.join(', '),
                }}
              >
                <MenuItem value="all">
                  <ListItemIcon>
                    <Checkbox
                      checked={
                        isAllVerification === 0 ? false : isAllVerification
                      }
                      indeterminate={
                        verificationStatus.length > 0 &&
                        verificationStatus.length < verificationStatesArr.length
                      }
                    />
                  </ListItemIcon>
                  <ListItemText primary="Select All" />
                </MenuItem>
                {verificationStatesArr.map((name) => (
                  <MenuItem key={name} value={name}>
                    <ListItemIcon>
                      <Checkbox
                        checked={verificationStatus.indexOf(name) > -1}
                      />
                    </ListItemIcon>
                    <ListItemText primary={name} />
                  </MenuItem>
                ))}
              </TextField>
              <TextField
                select
                htmlFor="token-status"
                id="token-status"
                label="Token Status"
                value={tokenId}
                onChange={(e) => {
                  setTokenId(e.target.value);
                }}
              >
                {[
                  filterOptionAll,
                  tokenizationStates.NOT_TOKENIZED,
                  tokenizationStates.TOKENIZED,
                ].map((name) => (
                  <MenuItem key={name} value={name}>
                    {name}
                  </MenuItem>
                ))}
              </TextField>
              <MuiPickersUtilsProvider
                utils={DateFnsUtils}
                locale={getDatePickerLocale()}
              >
                <KeyboardDatePicker
                  margin="normal"
                  id="start-date-picker"
                  htmlFor="start-date-picker"
                  label="Start Date"
                  format={getDateFormatLocale(true)}
                  value={dateStart}
                  onChange={handleDateStartChange}
                  maxDate={dateEnd || Date()} // Don't allow selection after today
                  KeyboardButtonProps={{
                    'aria-label': 'change date',
                  }}
                />
                <KeyboardDatePicker
                  margin="normal"
                  id="end-date-picker"
                  htmlFor="end-date-picker"
                  label="End Date"
                  format={getDateFormatLocale(true)}
                  value={dateEnd}
                  onChange={handleDateEndChange}
                  minDate={dateStart || datePickerDefaultMinDate}
                  maxDate={Date()} // Don't allow selection after today
                  KeyboardButtonProps={{
                    'aria-label': 'change date',
                  }}
                />
              </MuiPickersUtilsProvider>
              <TextField
                htmlFor="grower-id"
                id="grower-id"
                label="Grower ID"
                placeholder="e.g. 2, 7"
                value={growerId}
                onChange={(e) => setGrowerId(e.target.value)}
              />
              <TextField
                htmlFor="capture-id"
                id="capture-id"
                label="Capture ID"
                placeholder="e.g. 80"
                value={captureId}
                onChange={(e) => setCaptureId(e.target.value)}
              />
              <TextField
                htmlFor="uuid"
                id="uuid"
                label="Capture UUID"
                placeholder=""
                value={uuid}
                onChange={(e) => setUUID(e.target.value)}
              />
              <TextField
                htmlFor="device-identifier"
                id="device-identifier"
                label="Device Identifier"
                placeholder="e.g. 1234abcd"
                value={deviceId}
                onChange={(e) => setDeviceId(e.target.value)}
              />
              <TextField
                htmlFor="grower-identifier"
                id="grower-identifier"
                label="Grower Identifier"
                placeholder="e.g. [email protected]"
                value={growerIdentifier}
                onChange={(e) => setGrowerIdentifier(e.target.value)}
              />
              <TextField
                data-testid="species-dropdown"
                select
                htmlFor="species"
                id="species"
                label="Species"
                value={speciesId}
                onChange={(e) => setSpeciesId(e.target.value)}
              >
                {speciesContext.isLoading ? (
                  <CircularProgress />
                ) : (
                  [
                    { id: ALL_SPECIES, name: 'All' },
                    {
                      id: SPECIES_NOT_SET,
                      name: 'Not set',
                    },
                    ...speciesContext.speciesList,
                  ].map((species) => (
                    <MenuItem
                      data-testid="species-item"
                      key={species.id}
                      value={species.id}
                    >
                      {species.name}
                    </MenuItem>
                  ))
                )}
              </TextField>
              <Autocomplete
                data-testid="tag-dropdown"
                label="Tag"
                htmlFor="tag"
                id="tag"
                classes={{
                  inputRoot: classes.autocompleteInputRoot,
                }}
                options={[
                  ...tagsContext.tagList.filter((t) =>
                    t.tagName
                      .toLowerCase()
                      .startsWith(tagSearchString.toLowerCase())
                  ),
                ]}
                value={tag}
                defaultValue={'Not set'}
                getOptionLabel={(tag) => {
                  return tag.tagName;
                }}
                onChange={(_oldVal, newVal) => {
                  //triggered by onInputChange
                  if (newVal && newVal.tagName === 'Not set') {
                    setTag('Not set');
                  } else {
                    setTag(newVal);
                  }
                }}
                onInputChange={(_oldVal, newVal) => {
                  setTagSearchString(newVal);
                }}
                renderInput={(params) => {
                  return <TextField {...params} label="Tag" />;
                }}
                // selectOnFocus
                // clearOnBlur
                // handleHomeEndKeys
              />
              <SelectOrg
                orgId={organizationId}
                handleSelection={(org) => {
                  setStakeholderUUID(org.stakeholder_uuid);
                  setOrganizationId(org.id);
                }}
              />
            </Grid>
            <Grid className={classes.inputContainer}>
              <Button
                className={classes.apply}
                type="submit"
                label="submit"
                htmlFor="submit"
                id="submit"
                variant="outlined"
                color="primary"
                onClick={(e) => handleSubmit(e)}
              >
                Apply
              </Button>
              <Button
                className={classes.apply}
                label="reset"
                htmlFor="reset"
                id="reset"
                variant="outlined"
                color="primary"
                onClick={handleReset}
              >
                Reset
              </Button>
            </Grid>
          </Grid>
        </form>
      }
    </>
  );
}

TaskTool = ({
  task,
  notification,
  notificationCollapseHandler,
  updateNotificationHandler,
  addTasksHandler,
  addMultipleTasksHandler,
  updateTaskHandler,
  selectUpdateTaskHandler
}) => {
  const classes = useStyles();

  const [startDateState, setStartDate] = useState(moment()
    .format(moment.HTML5_FMT.DATE));
  const [endDateState, setEndDate] = useState(moment()
    .format(moment.HTML5_FMT.DATE));

  useEffect(() => {
    // FIXME: This not allow change the date of task.
    if (task) {
      setStartDate(task.date);
      setEndDate(task.date);
    }

    logDebug("TaskTool", "render", "task", task, startDateState, endDateState);
  });

  const resetFormValues = (setFieldValue) => {
    setStartDate(moment()
      .utc()
      .format(moment.HTML5_FMT.DATE));
    setEndDate(moment()
      .utc()
      .format(moment.HTML5_FMT.DATE));

    setFieldValue("button", "ADD", false);
    setFieldValue("taskName", "", false);
    setFieldValue("taskDescription", "", false);
    setFieldValue("multipleDays", false, false);
    setFieldValue("isUpdate", false, false);

    updateNotificationHandler(false, "", "");
    selectUpdateTaskHandler(null);
  };

  return (
    <Card className={clsx(classes.root)}>
      <CardHeader
        title="Plan Daily Routine"
      />
      <Divider />
      <CardContent>
        <Formik
          // FIXME: Please remote the init values
          initialValues={{
            taskName: task !== null ? task.taskName : "",
            taskDescription: task !== null ? task.taskDescription : "",
            multipleDays: false,
            button: null,
            isUpdate: task !== null
          }}
          validationSchema={Yup.object()
            .shape({
              taskName: Yup.string()
                .max(255)
                .required("Name is required")
            })}
          enableReinitialize
          onSubmit={(values, { setSubmitting }) => {
            if (values.multipleDays) {
              if (moment(startDateState)
                .isSameOrAfter(moment(endDateState))) {
                const errorCode = ErrorMessage.CODE_0001;
                updateNotificationHandler(true, errorCode.msg, errorCode.level);
              } else {
                const dailyTask = {
                  name: values.taskName,
                  description: values.taskDescription,
                  date: startDateState,
                  toDate: endDateState
                };

                addMultipleTasksHandler(dailyTask);
              }
            } else if (values.isUpdate) {
              const dailyTask = {
                name: values.taskName,
                description: values.taskDescription,
                date: startDateState
              };

              logDebug("TaskTool", "update", "dailyTask", dailyTask);

              updateTaskHandler(dailyTask);
            } else {
              const dailyTask = {
                name: values.taskName,
                description: values.taskDescription,
                date: startDateState
              };

              addTasksHandler(dailyTask);
            }

            setSubmitting(false);
          }}
        >
          {({
            errors,
            handleBlur,
            handleChange,
            handleSubmit,
            touched,
            values,
            setFieldValue
          }) => (
            <form onSubmit={handleSubmit}>
              <Box>
                <Grid
                  container
                  spacing={1}
                >
                  <Grid item xs={12} lg={5} md={5}>
                    <TextField
                      error={Boolean(touched.taskName && errors.taskName)}
                      fullWidth
                      helperText={touched.taskName && errors.taskName}
                      label="Routine Name"
                      margin="dense"
                      name="taskName"
                      onBlur={handleBlur}
                      onChange={handleChange}
                      type="text"
                      value={values.taskName}
                      variant="outlined"
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      fullWidth
                      helperText="A simple description/instructions for routine"
                      label="Routine Description"
                      margin="dense"
                      name="taskDescription"
                      onBlur={handleBlur}
                      onChange={handleChange}
                      type="text"
                      value={values.taskDescription}
                      variant="outlined"
                    />
                  </Grid>
                  <Grid item sm={12} md={3}>
                    <FormGroup row>
                      <FormControlLabel
                        control={(
                          <Checkbox
                            name="multipleDays"
                            onBlur={handleBlur}
                            onChange={handleChange}
                            disabled={values.isUpdate}
                            checked={values.multipleDays}
                          />
                        )}
                        labelPlacement="start"
                        label="Multiple Days"
                      />
                      <FormHelperText className={classes.multipleDaysHelper}>
                        Enable this to add same routine into multiple days
                      </FormHelperText>
                    </FormGroup>
                  </Grid>
                  <Grid item sm={12} md={3}>
                    <KeyboardDatePicker
                      autoOk
                      helperText="Start Date"
                      margin="dense"
                      format="YYYY/MM/DD"
                      onChange={(date) => {
                        setStartDate(moment(date)
                          .format(moment.HTML5_FMT.DATE));
                      }}
                      value={startDateState}
                      inputVariant="outlined"
                      variant="inline"
                    />
                  </Grid>
                  <Grid item sm={12} md={3}>
                    <KeyboardDatePicker
                      autoOk
                      disabled={!values.multipleDays}
                      helperText="End Date"
                      margin="dense"
                      format="YYYY/MM/DD"
                      onChange={(date) => {
                        setEndDate(moment(date)
                          .format(moment.HTML5_FMT.DATE));
                      }}
                      value={endDateState}
                      inputVariant="outlined"
                      variant="inline"
                    />
                  </Grid>
                </Grid>
              </Box>

              <Box
                display="flex"
                justifyContent="flex-end"
                className={clsx(classes.actionButtons)}
              >
                <Grid
                  container
                  justifyContent="flex-end"
                  spacing={2}
                >
                  <Grid item>
                    <Button
                      className={classes.addButton}
                      fullWidth
                      disabled={values.isUpdate}
                      size="large"
                      onClick={() => {
                        setFieldValue("button", "ADD", false);
                        handleSubmit();
                      }}
                      variant="contained"
                    >
                      Add
                    </Button>
                  </Grid>
                  <Grid item>
                    <Button
                      className={classes.updateButton}
                      color="inherit"
                      fullWidth
                      disabled={!values.isUpdate}
                      size="large"
                      onClick={() => {
                        setFieldValue("button", "UPDATE", false);
                        handleSubmit();
                      }}
                      variant="contained"
                    >
                      Update
                    </Button>
                  </Grid>
                  <Grid item>
                    <Button
                      className={classes.resetButton}
                      color="inherit"
                      fullWidth
                      size="large"
                      onClick={() => {
                        resetFormValues(setFieldValue);
                      }}
                      variant="contained"
                    >
                      Reset
                    </Button>
                  </Grid>
                </Grid>
              </Box>
              {notification.enable
                ? (
                  <Notification
                    collapse
                    open={notification.enable}
                    openHandler={notificationCollapseHandler}
                    level={notification.level}
                    message={notification.message}
                  />
                )
                : null}

            </form>
          )}
        </Formik>
      </CardContent>
    </Card>
  );
}

IncomeView = ({
  coachIdentifier
}) => {

  const classes = useStyles();
  const isMobile = useIsMediumMobile();

  const [fromDate, setFromDate] = useState(getDefaultTimezoneDateTime(moment.tz()));
  const [toDate, setToDate] = useState(getDefaultTimezoneDateTime(moment.tz()
    .add(1, "month")));

  // region Code with queries to API

  const appointments = useFetchAppointmentsCoachWithFilter(
    coachIdentifier,
    displayDateWithDash(fromDate),
    displayDateWithDash(toDate),
    {
      select: (data) => {
        if (data === undefined || !data.appointments) {
          return [];
        }

        let totalPending = 0;
        let totalAccepted = 0;
        let totalMoney = 0.0;

        const appointmentsTable = data.appointments.map((item) => {
            const date = displayDateWithSlash(moment.tz(item.dttmStarts, defaultTimezone));

            if (item.incomeStatus === "ACCEPTED") {
              totalAccepted++;
              totalMoney = totalMoney + item.price;
            }

            if (item.incomeStatus === "PENDING") {
              totalPending++;
            }

            return [date, `${item.client.firstName} ${item.client.lastName}`, `${item.price} £`, item.incomeStatus, item];
          }
        );

        return {
          appointments: appointmentsTable,
          totalPending: totalPending,
          totalAccepted: totalAccepted,
          totalMoney: totalMoney
        };
      }
    }
  );

  const editAppointment = useEditAppointmentClient();

  // endregion

  // region General methods

  const updateAppointmentStatus = (value, status) => {
    editAppointment.mutate({
        appointmentIdentifier: value.identifier,
        appointment: {
          "dttmStarts": convertDateToTimezoneInstance(value.dttmStarts),
          "dttmEnds": convertDateToTimezoneInstance(value.dttmEnds),
          resource: {
            "price": value.price,
            "notes": value.notes
          },
          "incomeStatus": status
        }
      }, {
        onSuccess: () => {
          appointments.refetch();
        },
        onError: (error) => {
          logError("Appointments", "useMutation editAppointment", "Error Details:", error.response.data.detail);
        }
      }
    );
  };

  const columns = [
    "Date",
    "Appointment",
    "Price",
    "Status",
    {
      label: "Actions",
      options: {
        filter: false,
        sort: false,
        setCellHeaderProps: () => {
          return {
            className: clsx({
              [classes.rightTableHead]: true
            })
          };
        },
        // eslint-disable-next-line react/display-name
        customBodyRender: (value) => {
          return (
            <Grid
              container
              justifyContent={isMobile ? "flex-start" : "flex-end"}
              spacing={1}
              className={clsx({
                [classes.actionColumnTable]: true
              })}
            >
              <Grid item>
                <Button
                  className={classes.acceptButton}
                  variant="contained"
                  disabled={value.incomeStatus === "ACCEPTED"}
                  onClick={() => updateAppointmentStatus(value, "ACCEPTED")}
                >
                  <SvgIcon
                    fontSize="small"
                    color="inherit"
                  >
                    <AcceptIcon />
                  </SvgIcon>
                </Button>
              </Grid>
              <Grid item>
                <Button
                  className={classes.rejectButton}
                  variant="contained"
                  disabled={value.incomeStatus === "REJECTED"}
                  onClick={() => updateAppointmentStatus(value, "REJECTED")}
                >
                  <SvgIcon
                    fontSize="small"
                    color="inherit"
                  >
                    <RejectIcon />
                  </SvgIcon>
                </Button>
              </Grid>
            </Grid>
          );
        }
      }
    }
  ];

  // endregion

  return (
    <Page
      title="Income"
      isError={appointments.isError}
      isLoading={false}>
      <Grid
        direction="row"
        container
        spacing={1}
      >
        <Grid item xs={12} md={9} lg={9}>
          <LoadingBox isLoading={appointments.isFetching}>
            <Table
              title="Income Status"
              data={appointments.data?.appointments}
              columns={columns}
              options={options}
            />
          </LoadingBox>
        </Grid>
        <Grid item xs={12} md={3} lg={3}>
          <Grid
            direction="row"
            container
            spacing={1}
          >
            <Grid item xs={12}>
              <Card>
                <CardContent>
                  <Typography component="h2" variant="h5" gutterBottom>
                    Filter
                  </Typography>
                  <Box>
                    <KeyboardDatePicker
                      autoOk
                      allowKeyboardControl={false}
                      fullWidth
                      helperText="from"
                      margin="dense"
                      format="YYYY/MM/DD"
                      value={fromDate}
                      placeholder={displayDateWithSlash(fromDate)}
                      onChange={(date) => {
                        if (date !== null) {
                          setFromDate(date);
                        }
                      }}
                    />
                  </Box>
                  <Box>
                    <KeyboardDatePicker
                      autoOk
                      allowKeyboardControl={false}
                      fullWidth
                      helperText="to"
                      margin="dense"
                      format="YYYY/MM/DD"
                      value={toDate}
                      placeholder={displayDateWithSlash(toDate)}
                      onChange={(date) => {
                        if (date !== null) {
                          setToDate(date);
                        }
                      }}
                    />
                  </Box>
                  <Box
                    display="flex"
                    flexDirection="column"
                    justifyContent="flex-end"
                    textAlign="right"
                  >
                    <Box>
                      Income Accepted: {appointments.data?.totalAccepted}
                    </Box>
                    <Box>
                      Income Pending: {appointments.data?.totalPending}
                    </Box>
                    <Typography component="h2" variant="h5" gutterBottom>
                      Total: {appointments.data?.totalMoney}£
                    </Typography>
                  </Box>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Page>
  );

}

Filters = ({
  timeFrame,
  date,
  onChangeDateHandler,
  weight,
  onChangeWeightHandler,
  onChangeTimeFrameHandler,
  enableAddingWeight,
  onAddWeightHandler,
  className
}) => {
  const classes = useStyles();

  return (
    <Card className={clsx(classes.root)}>
      <CardContent className={className}>
        <div className={classes.filterSession}>
          <Grid
            container
            spacing={1}
            direction="row"
          >
            <Grid
              item
              xs={12}
            >
              <Typography component="h2" variant="h5" gutterBottom>
                Filters
              </Typography>
            </Grid>
            <Grid
              item
              xs={12}
            >
              <FormControl variant="outlined">
                <InputLabel>Time Frame</InputLabel>
                <Select
                  labelId="time-frame-weight"
                  id="time-frame-weight-select"
                  value={timeFrame}
                  onChange={(event) => onChangeTimeFrameHandler(event.target.value)}
                  label="Time Frame"
                >
                  <MenuItem value="1_WEEK">1 Week</MenuItem>
                  <MenuItem value="1_MONTH">1 Month</MenuItem>
                  <MenuItem value="2_MONTH">2 Month</MenuItem>
                  <MenuItem value="6_MONTH">6 Month</MenuItem>
                </Select>
              </FormControl>
            </Grid>
          </Grid>
        </div>
        {enableAddingWeight
          ? (
            <>
              <Divider variant="fullWidth" />
              <div className={classes.addSession}>
                <Typography component="h2" variant="h5" gutterBottom>
                  Add
                </Typography>
                <TextField
                  fullWidth
                  helperText="Please specify your weight"
                  label="Weight"
                  name="weight"
                  type="number"
                  required
                  inputProps={{
                    step: 0.05,
                    min: 0
                  }}
                  onChange={(event) => {
                    onChangeWeightHandler(event.target.valueAsNumber);
                  }}
                  value={weight}
                />
                <KeyboardDatePicker
                  autoOk
                  fullWidth
                  helperText="Date"
                  margin="dense"
                  format="YYYY/MM/DD"
                  onChange={(newDate) => onChangeDateHandler(newDate)}
                  value={date}
                />
                <Box
                  display="flex"
                  justifyContent="flex-end"
                  m={1}
                >
                  <Button
                    color="primary"
                    variant="contained"
                    startIcon={<AddIcon />}
                    onClick={() => onAddWeightHandler(weight, date)}
                  >
                    Add
                  </Button>
                </Box>
              </div>
            </>
          )
          : null}
      </CardContent>
    </Card>
  );
}

function UpdateQuizDetails(props) {
	const [quizId, setQuizId] = useState(props.match.params.id);
	const [quizName, setQuizName] = useState("");
	const [quizDate, setQuizDate] = useState(new Date());
	const [duration, setDuration] = useState(5);
	const [type, setType] = useState("private");

	const [loading, setLoading] = useState(true);
	const [redirect, setRedirect] = useState(false);

	const { executeRecaptcha } = useGoogleReCaptcha();

	const onQuizNameChange = (event) => {
		setQuizName(event.target.value);
	};

	const handleDateChange = (date) => {
		setQuizDate(date);
	};

	const handleTimeChange = (e, val) => {
		setDuration(val);
	};

	const onTypeChange = (event) => {
		setType(event.target.value);
	};

	const handleSubmit = async () => {
		setLoading(true);
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/quiz/updateDetails/${quizId}`;

		let captcha = await executeRecaptcha("update_quiz_details");

		let updateOps = [
			{ propName: "quizName", value: quizName },
			{ propName: "scheduledFor", value: quizDate.getTime() },
			{ propName: "quizDuration", value: duration },
		];

		let data = {
			updateOps,
			captcha,
		};

		try {
			await axios
				.patch(url, data, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setLoading(false);
					setRedirect(true);
				});
		} catch (error) {
			console.log(error);
			setLoading(false);
		}
	};

	const getQuizDetails = async () => {
		setLoading(true);
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;

		try {
			await axios
				.get(url, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					let details = res.data.result;
					setQuizName(details.quizName);
					setQuizDate(new Date(Number(details.scheduledFor)));
					setDuration(details.quizDuration);
					setType(details.quizType);
					setLoading(false);
				});
		} catch (error) {
			console.log(error);
			setLoading(false);
		}
	};

	useEffect(() => {
		getQuizDetails();
	}, []);

	useEffect(() => {
		let token = localStorage.getItem("authToken");
		if (token === null) {
			setLoading(false);
			setRedirect(true);
			return;
		}
	}, []);

	if (loading) {
		return <Loading />;
	} else if (redirect) {
		return <Redirect to={`/editQuiz/${quizId}`} />;
	} else {
		return (
			<Container className="create-quiz-page">
				<div className="create-form">
					<Typography variant="h4" className="create-head">
						Quiz Details
					</Typography>
					<div className="create-form-inputs">
						<TextInput
							variant="outlined"
							label="Quiz Name"
							value={quizName}
							onChange={onQuizNameChange}
							name="Quiz Name"
							className="form-input"
						/>

						<MuiPickersUtilsProvider utils={DateFnsUtils}>
							<Grid
								className="date-time-select"
								container
								spacing={3}
							>
								<Grid item xs={12} sm={6}>
									<KeyboardDatePicker
										disableToolbar
										variant="inline"
										format="MM/dd/yyyy"
										margin="normal"
										label="Select Quiz Date"
										value={quizDate}
										onChange={handleDateChange}
									/>
								</Grid>
								<Grid item xs={12} sm={6}>
									<KeyboardTimePicker
										margin="normal"
										label="Select Quiz Start Time"
										value={quizDate}
										onChange={handleDateChange}
									/>
								</Grid>
							</Grid>
						</MuiPickersUtilsProvider>
						<p style={{ marginTop: "5%", marginBottom: "5%" }}>
							Quiz Time (in minutes):
						</p>
						<Slider
							defaultValue={5}
							aria-labelledby="quiz time slider"
							step={5}
							min={5}
							max={60}
							valueLabelDisplay="on"
							marks
							className="time-slider"
							value={duration}
							onChange={handleTimeChange}
						/>
						<p style={{ color: "#777" }}>Select quiz type: </p>
						<Tooltip title="Cannot change quiz type">
							<Select
								disabled
								value={type}
								onChange={onTypeChange}
								className="type-select"
							>
								<MenuItem value="public">Public</MenuItem>
								<MenuItem value="private">Private</MenuItem>
							</Select>
						</Tooltip>

						<Button
							className="login-btn create-btn"
							onClick={handleSubmit}
						>
							Update Quiz
						</Button>
					</div>
				</div>
			</Container>
		);
	}
}

function CreateQuiz() {
	const [quizName, setQuizName] = useState("");
	const [quizDate, setQuizDate] = useState(new Date());
	const [duration, setDuration] = useState(5);
	const [type, setType] = useState("private");

	const [loading, setLoading] = useState(false);
	const [redirect, setRedirect] = useState(false);
	const [redirectEdit, setRedirectEdit] = useState(false);
	const [quizId, setQuizId] = useState("");

	const [error, setError] = useState(false);

	const { executeRecaptcha } = useGoogleReCaptcha();

	const onQuizNameChange = (event) => {
		setQuizName(event.target.value);
	};

	const handleDateChange = (date) => {
		setQuizDate(date);
	};

	const handleTimeChange = (e, val) => {
		setDuration(val);
	};

	const onTypeChange = (event) => {
		setType(event.target.value);
	};

	const handleSubmit = async () => {
		setLoading(true);
		let token = localStorage.getItem("authToken");
		let url = "https://quizzie-api.herokuapp.com/quiz/createQuiz";

		let captcha = await executeRecaptcha("create_quiz");

		let data = {
			quizName: quizName,
			scheduledFor: quizDate.getTime(),
			quizDuration: duration,
			quizType: type,
			captcha: captcha,
		};

		try {
			await axios
				.post(url, data, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setQuizId(res.data.result._id);
					setLoading(false);
					setRedirectEdit(true);
				});
		} catch (error) {
			console.log(error);
			setLoading(false);
		}
	};

	useEffect(() => {
		let token = localStorage.getItem("authToken");
		if (token === null) {
			setLoading(false);
			setRedirect(true);
			return;
		}
	}, []);

	if (loading) {
		return <Loading />;
	} else if (redirect) {
		return <Redirect to="/dashboard" />;
	} else if (redirectEdit) {
		return <Redirect to={`/editQuiz/${quizId}`} />;
	} else {
		return (
			<Container className="create-quiz-page">
				<div className="create-form">
					<Typography variant="h4" className="create-head">
						Quiz Details
					</Typography>
					<div className="create-form-inputs">
						<TextInput
							variant="outlined"
							label="Quiz Name"
							value={quizName}
							onChange={onQuizNameChange}
							name="Quiz Name"
							className="form-input"
						/>

						<MuiPickersUtilsProvider utils={DateFnsUtils}>
							<Grid
								className="date-time-select"
								container
								spacing={3}
							>
								<Grid item xs={12} sm={6}>
									<KeyboardDatePicker
										disableToolbar
										variant="inline"
										format="MM/dd/yyyy"
										margin="normal"
										label="Select Quiz Date"
										value={quizDate}
										onChange={handleDateChange}
									/>
								</Grid>
								<Grid item xs={12} sm={6}>
									<KeyboardTimePicker
										ampm={true}
										format="hh:mm:ss aa"
										views={["hours", "minutes", "seconds"]}
										margin="normal"
										label="Select Quiz Start Time"
										value={quizDate}
										onChange={handleDateChange}
										keyboardIcon={<AccessAlarm />}
									/>
								</Grid>
							</Grid>
						</MuiPickersUtilsProvider>
						<p style={{ marginTop: "5%", marginBottom: "5%" }}>
							Quiz Time (in minutes):
						</p>
						<Slider
							defaultValue={5}
							aria-labelledby="quiz time slider"
							step={5}
							min={5}
							max={60}
							valueLabelDisplay="on"
							marks
							className="time-slider"
							value={duration}
							onChange={handleTimeChange}
						/>
						<p>Select quiz type: </p>
						<Select
							value={type}
							onChange={onTypeChange}
							className="type-select"
						>
							<MenuItem value="public">Public</MenuItem>
							<MenuItem value="private">Private</MenuItem>
						</Select>

						<Button
							className="login-btn create-btn"
							onClick={handleSubmit}
						>
							Create Quiz
						</Button>
						<Typography
							variant="subtitle1"
							className="create-subtitle"
						>
							NOTE: After creating the quiz, you can add questions
							by editing the quiz in YOUR QUIZZES section of the
							dashboard.
						</Typography>
					</div>
				</div>
				<Snackbar
					open={error}
					autoHideDuration={5000}
					onClose={() => setError(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setError(false)}
					>
						There was a problem. Please try again!
					</Alert>
				</Snackbar>
			</Container>
		);
	}
}