@material-ui/core#Input JavaScript Examples

SearchInput = props => {
  const { className, onChange, style, ...rest } = props;
  const classes = useStyles();

  return (
    <Paper
      {...rest}
      className={clsx(classes.root, className)}
      style={style}
    >
      <SearchIcon className={classes.icon} />
      <Input
        {...rest}
        className={classes.input}
        disableUnderline
        onChange={onChange}
      />
    </Paper>
  );
}

InputEmailField = props => {
    return (
        <FormControl id="input-field">
            <Input
                startAdornment={
                    <InputAdornment position="start">
                        <EmailIcon />
                    </InputAdornment>
                }
                value={props.email}
                disabled={true}
            />
        </FormControl>
    );
}

SearchInput = props => {
  const { className, onChange, style, ...rest } = props;

  const classes = useStyles();

  return (
    <Paper
      {...rest}
      className={clsx(classes.root, className)}
      style={style}
    >
      <SearchIcon className={classes.icon} />
      <Input
        {...rest}
        className={classes.input}
        disableUnderline
        onChange={onChange}
      />
    </Paper>
  );
}

function SearchInput({ getAutocomplete, getButtonProps, getInputProps, appliedFilters }) {
  return (
    <>
      <div className="sui-search-box__wrapper">
        <Input
          {...getInputProps()}
          startAdornment={appliedFilters}
        />
        {getAutocomplete()}
      </div>
      <input {...getButtonProps()} />
    </>
  );
}

MyImageField = ({ label, id, name, setFieldValue, ...props }) => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Input
        type="file"
        inputProps={{
          accept: 'image/*',
          multiple: true
        }}
        name={name}
        id={id}
        className={classes.imageField}
        onChange={e => {
          setFieldValue('images', e.currentTarget.files);
        }}
      />
      
      <InputLabel htmlFor={id}>
        <Button {...props} component='span'>
          { label }
        </Button>
      </InputLabel>
    </div>
  );
}

render() {
    //console.log("Rendering AddGraph");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add Graph</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="center">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="plotname">Plot Name</InputLabel>
                <Input
                  id="plotname"
                  onChange={event => this.plotname = event.target.value}
                  aria-describedby="plotname-helper-text"
                  inputProps={{
                    'aria-label': 'Plot Name',
                  }}
                />
                <FormHelperText id="plotname-helper-text">Can be left empty</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
            <ToggleButtonGroup orientation="vertical" value={this.lines} onChange={(event, lines) => {this.lines = lines; this.setState({render_revision: this.state.render_revision + 1}); } } aria-label="lines available">
              {this.renderButtons()}
            </ToggleButtonGroup>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.addplot(this.plotname, this.lines)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes } = this.props;
    const { open, category, amount } = this.state;
    return (
      <Fragment>
        <Button
          variant='contained'
          className={classes.newBudgetBtn}
          color='primary'
          onClick={this.handleOpen}
        >
          Create New Budget
        </Button>
        <Modal
          aria-labelledby='Create New Budget'
          aria-describedby="Create's a new budget"
          open={open}
          onClose={this.handleClose}
        >
          <div className={classes.paper}>
            <Typography variant='body1' id='modal-title'>
              Select a category and enter a budget amount.
            </Typography>

            <FormControl
              style={{
                width: '181px',
                marginTop: '10px',
                marginBottom: '20px',
              }}
            >
              <InputLabel htmlFor='category-native-simple'>Category</InputLabel>
              <Select
                native
                value={category}
                onChange={this.handleChange}
                inputProps={{
                  name: 'category',
                  id: 'category-native-simple',
                }}
              >
                <option value='' />
                {this.renderBudgetOptions()}
              </Select>
            </FormControl>

            <FormControl style={{ display: 'block', marginBottom: '20px' }}>
              <InputLabel htmlFor='adornment-amount'>Amount</InputLabel>
              <Input
                type='number'
                inputProps={{
                  name: 'amount',
                  id: 'amount-native-simple',
                }}
                placeholder='Enter a number'
                onChange={this.handleChange}
                startAdornment={
                  <InputAdornment position='start'>$</InputAdornment>
                }
              />
              <Typography color='error' variant='body1'>
                * Budgets must be in increments of 5. {<br />}* Amounts less
                than 5 will default to $5.
              </Typography>
            </FormControl>
            <Button
              disabled={amount && category ? false : true}
              fullWidth
              variant='contained'
              color='secondary'
              onClick={this.handleAddNewBudget}
            >
              Add Budget
            </Button>
          </div>
        </Modal>
      </Fragment>
    );
  }

export default function FeaturedPost(props) {
  const classes = useStyles();
  const { post } = props;

  return (
    <Grid item xs={12} md={6}>
      <Card className={classes.card}>
        <div className={classes.cardDetails}>
          <CardContent>
            <Typography component="h2" variant="h5">
              {post.title}
            </Typography>
            <Typography variant="subtitle1" color="textSecondary">
              {post.date}
            </Typography>
            <Typography variant="subtitle1" paragraph>
              {post.description}
            </Typography>
            {post.suggestionPlaceholder ? (
              <Grid container direction="row">
                <FormControl>
                  <Grid item>
                    <InputLabel htmlFor="suggestions">
                      {post.suggestionPlaceholder}
                    </InputLabel>
                    <Input
                      id="suggestions"
                      aria-describedby="my-helper-suggestions"
                    />
                    <Button type="submit">Submit</Button>
                  </Grid>
                  <FormHelperText id="my-helper-suggestions">
                    We will try to cover the most asked topics.
                  </FormHelperText>
                </FormControl>
              </Grid>
            ) : null}
            {post.feedback ? (
              <Grid container direction="row">
                <FormControl>
                  <Grid item>
                    <InputLabel htmlFor="feedback">{post.feedback}</InputLabel>
                    <Input id="feedback" aria-describedby="my-helper-text" />
                    <Button type="submit">Submit</Button>
                  </Grid>
                  <FormHelperText id="my-helper-text">
                    Your feedback helps us improve.
                  </FormHelperText>
                </FormControl>
              </Grid>
            ) : null}
            <Typography variant="subtitle1" color="primary">
              <Button href="#" disabled={post.buttonDisable}>
                {post.buttonText}
              </Button>
            </Typography>
          </CardContent>
        </div>
        <Hidden xsDown>
          <CardMedia
            className={classes.cardMedia}
            image={post.image}
            title={post.imageTitle}
          />
        </Hidden>
      </Card>
    </Grid>
  );
}

render() {

        let classes = this.props.classes;

        return(
            <div className={classes.root}>
                <h6 className={classes.title}>Generate Contact Flow</h6>
                <Grid className={classes.inputsContainer} container direction={"column"}>
                    <FormControl>
                        <InputLabel type={"text"} htmlFor="welcome-message">Welcome Message</InputLabel>
                        <Input id="welcome-message" disableUnderline={true} readOnly={false}  name={"welcomeMessage"}  value={this.state.welcomeMessage} onChange={this.handleInputChange}/>
                    </FormControl>
                    <FormControl>
                        <InputLabel htmlFor="fallback-queue-name">Fallback Queue</InputLabel>
                        <Input id="fallback-queue-name" disableUnderline={true} readOnly={false} name={"fallbackQueueName"} value={this.state.fallbackQueueName} onChange={this.handleInputChange}/>
                    </FormControl>
                    <FormControl>
                        <InputLabel type={"text"} htmlFor="default-error-message">Default Error Message</InputLabel>
                        <Input id="default-error-message" disableUnderline={true} readOnly={false}  name={"defaultErrorMessage"}  value={this.state.defaultErrorMessage} onChange={this.handleInputChange}/>
                    </FormControl>
                    <FormControl>
                        <InputLabel htmlFor="max-vm-duration">Max Voicemail Duration (sec.)</InputLabel>
                        <Input type={"number"} inputProps={{ min: "1", max: "120", step: "1" }} id="max-vm-duration" disableUnderline={true} readOnly={false} name={"maxVoicemailDuration"}  value={this.state.maxVoicemailDuration} onChange={this.handleInputChange}/>
                    </FormControl>
                    <FormControl>
                        <InputLabel htmlFor="loop-count">Incorrect Extension Loop Count</InputLabel>
                        <Input type={"number"} inputProps={{ min: "0", max: "10", step: "1" }} id="loop-count" disableUnderline={true} readOnly={false} name={"errorLoopCount"} value={this.state.errorLoopCount} onChange={this.handleInputChange}/>
                    </FormControl>
                </Grid>
                {(this.props.downloadError) ?
                    <p className={classes.error}>
                        {this.props.downloadError}
                    </p> :
                    null
                }
                <Grid className={classes.padTop} container spacing={5} direction="row">
                    <Grid item>
                        <AsyncButton loading={this.props.downloading} color="primary" variant="contained" onClick={this.handleDownload} disabled={this.props.userRole != "Administrator"}>Download</AsyncButton>
                    </Grid>
                </Grid>
            </div>
        )

    }

export default function InputWithIcon(props) {
  const classes = useStyles();
  const cookies = new Cookies();
  const email = cookies.get('userCookie').Email;
  const googleToken = cookies.get('userCookie').Token;

  return (
    <div>
      <div className={classes.margin}>
        <Formik
          initialValues={{
            comment: '',
          }}
          validate={() => {}}
          onSubmit={async (values) => {
            if (values.comment && props.userId) {
              axios
                .post(
                  `${ConnectServerUrl}/addcomment?` +
                    queryString.stringify(
                      { googleToken, email },
                      { withCredentials: true }
                    ),
                  {
                    comment: values.comment,
                    postId: props.postId,
                    username: props.username,
                    userId: props.userId,
                    name: props.name,
                  }
                )
                .then(function (res) {
                  if (res.data === 'success') {
                    console.log('comment added!');
                    window.location.reload();
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
            }
          }}
        >
          {({ values, handleChange, handleBlur, handleSubmit }) => (
            <form onSubmit={handleSubmit} className={classes.root}>
              <FormControl fullWidth className={classes.margin}>
                {/* <InputLabel htmlFor="standard-adornment-amount">
                  Add a comment
                </InputLabel> */}
                <Input
                  id="standard-adornment-amount"
                  name="comment"
                  
                  value={values.comment}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="Add a comment"
                  endAdornment={
                    <InputAdornment position="end">
                      <IconButton aria-label="send" size="medium" type="submit">
                        <SendIcon />
                      </IconButton>
                    </InputAdornment>
                  }
                />
              </FormControl>
            </form>
          )}
        </Formik>
      </div>
    </div>
  );
}

render() {
    //console.log("Rendering GraphSettings");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Graphs settings</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="flex-start">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="cols">Graph columns</InputLabel>
                <Input
                  id="cols"
                  value={this.state.cols}
                  onChange={event => this.setState({ cols: Math.min(Math.max(parseInt(event.target.value), 1), 12) })}
                  aria-describedby="cols-helper-text"
                  inputProps={{
                    'aria-label': 'Graph columns',
                  }}
                />
                <FormHelperText id="cols-helper-text">Max: 12</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="rateHz">Render rate</InputLabel>
                <Input
                  id="rateHz"
                  value={this.state.rateHz}
                  onChange={event => this.setState({ rateHz: Math.min(Math.max(parseInt(event.target.value), 0.5), 20) })}
                  endAdornment={<InputAdornment position="end">Hz</InputAdornment>}
                  aria-describedby="rateHz-helper-text"
                  inputProps={{
                    'aria-label': 'Render rate',
                  }}
                />
                <FormHelperText id="rateHz-helper-text">Min: 0.5, Max: 20</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="max_datapoints">Max data points</InputLabel>
                <Input
                  id="max_datapoints"
                  value={this.state.max_datapoints}
                  onChange={event => this.setState({ max_datapoints: Math.min(Math.max(parseInt(event.target.value), 20), 10000) })}
                  aria-describedby="max_datapoints-helper-text"
                  inputProps={{
                    'aria-label': 'Max data points',
                  }}
                />
                <FormHelperText id="max_datapoints-helper-text">Max: 10000</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
              <FormControlLabel
                control={<Switch checked={this.state.webgl} onChange={() => this.setState({ webgl: !this.state.webgl })} name="webGL" />}
                label="WebGL support"
              />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.setSettings(this.state.cols, this.state.rateHz, this.state.max_datapoints, this.state.webgl)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

EditForm = ({ onCancel, onSubmit }) => {
  const classes = useStyles();
  const [{ data: bossData = [], loading }] = useAxios("/api/Admin/WorldBoss");
  const bossEl = useRef(null);
  const announceEl = useRef(null);
  const startTimeEl = useRef(null);
  const endTimeEl = useRef(null);

  const handleSubmit = () => {
    const [startAt, endAt] = [startTimeEl.current.value, endTimeEl.current.value];

    if (startAt >= endAt) {
      alert("請確認活動時間");
      return;
    }

    onSubmit({
      world_boss_id: parseInt(bossEl.current.value),
      announcement: announceEl.current.value,
      start_time: startAt,
      end_time: endAt,
    });
  };

  return (
    <Grid container spacing={1} component={Paper} className={classes.form}>
      {loading && <HeartbeatLoading />}
      <Grid item xs={12}>
        <Typography variant="h5">世界王活動管理</Typography>
      </Grid>
      <Grid item xs={12}>
        <FormControl fullWidth>
          <NativeSelect fullWidth inputRef={bossEl}>
            {bossData.map(boss => (
              <option key={boss.id} value={boss.id}>
                {boss.name}
              </option>
            ))}
          </NativeSelect>
          <FormHelperText>請選擇世界王來綁定活動，若無世界王，請先去新增世界王</FormHelperText>
        </FormControl>
      </Grid>
      <Grid item xs={12}>
        <TextField label="活動公告" multiline fullWidth margin="normal" inputRef={announceEl} />
      </Grid>
      <Grid item xs={6}>
        <FormControl fullWidth required margin="normal">
          <FormLabel>開始時間</FormLabel>
          <Input inputProps={{ type: "datetime-local" }} inputRef={startTimeEl} />
        </FormControl>
      </Grid>
      <Grid item xs={6}>
        <FormControl fullWidth required margin="normal">
          <FormLabel>結束時間</FormLabel>
          <Input inputProps={{ type: "datetime-local" }} inputRef={endTimeEl} />
        </FormControl>
      </Grid>
      <Grid item xs={6}>
        <Button variant="contained" color="secondary" fullWidth onClick={onCancel}>
          取消
        </Button>
      </Grid>
      <Grid item xs={6}>
        <Button variant="contained" color="primary" fullWidth onClick={handleSubmit}>
          新增
        </Button>
      </Grid>
    </Grid>
  );
}

render() {
    //console.log("Rendering MainSettings");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Main settings</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="flex-start">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="ws_url">WebSocket URL</InputLabel>
                <Input
                  id="ws_url"
                  value={this.state.ws_url}
                  onChange={event => this.setState({ ws_url: event.target.value })}
                  aria-describedby="ws_url-helper-text"
                  inputProps={{
                    'aria-label': 'WebSocket URL',
                  }}
                />
                <FormHelperText id="ws_url-helper-text">Tethered WiFi ws://192.168.43.1:8989</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="rateHz">Render rate</InputLabel>
                <Input
                  id="rateHz"
                  value={this.state.rateHz}
                  onChange={event => this.setState({ rateHz: Math.min(Math.max(parseInt(event.target.value), 0.5), 20) })}
                  endAdornment={<InputAdornment position="end">Hz</InputAdornment>}
                  aria-describedby="rateHz-helper-text"
                  inputProps={{
                    'aria-label': 'Render rate',
                  }}
                />
                <FormHelperText id="rateHz-helper-text">Min: 0.5, Max: 20</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
              <FormControlLabel
                control={<Switch checked={this.state.dark_theme} onChange={() => this.setState({ dark_theme: !this.state.dark_theme })} name="dark_theme" />}
                label="Dark theme"
              />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.setSettings(this.state.ws_url, this.state.rateHz, this.state.dark_theme)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

Header = (props) => {
  const { searchRoute, setSearchRoute } = useContext( AppContext )
  
  const { path } = useRouteMatch()
  const { t, i18n } = useTranslation()
  const classes = useStyles()
  let location = useLocation()
  const history = useHistory()

  const handleLanguageChange = lang => {
    vibrate(1)
    history.replace( location.pathname.replace('/'+i18n.language+'/', '/'+lang+'/') )
    i18n.changeLanguage(lang)
  }

  return (
    <Toolbar
      className={classes.toolbar}
    >
      <div onClick={() => {
          vibrate(1)
          history.push(`/${i18n.language}/search`)}
        }
      >
        <Typography variant='subtitle2'>獨立巴士預報</Typography>
      </div> 
      <Input 
        className={classes.searchRouteInput}
        type="text"
        value={searchRoute}
        placeholder={t('巴士線')}
        onChange={e => setSearchRoute(e.target.value)}
        onFocus={e => {
          vibrate(1)
          if ( checkMobile() ) {
            document.activeElement.blur()
          }
          history.replace(`/${i18n.language}/search`)
        }}
        disabled={path.includes('route')}
      />
      <LanguageTabs
          value={i18n.language}
          onChange={(e, v) => handleLanguageChange(v)}
        >
        <LanguageTab value="en" label="En" />
        <LanguageTab value="zh" label="繁" />
      </LanguageTabs>
    </Toolbar>
  );
}

render() {
    const { classes } = this.props;
    const { open, category, amount } = this.state;
    return (
      <Fragment>
        <Button
          variant='contained'
          className={classes.newBudgetBtn}
          color='primary'
          onClick={this.handleOpen}
        >
          Create New Budget
        </Button>
        <Modal
          aria-labelledby='Create New Budget'
          aria-describedby="Create's a new budget"
          open={open}
          onClose={this.handleClose}
        >
          <div className={classes.paper}>
            <Typography variant='body1' id='modal-title'>
              Select a category and enter a budget amount.
            </Typography>

            <FormControl
              style={{
                width: '181px',
                marginTop: '10px',
                marginBottom: '20px',
              }}
            >
              <InputLabel htmlFor='category-native-simple'>Category</InputLabel>
              <Select
                native
                value={category}
                onChange={this.handleChange}
                inputProps={{
                  name: 'category',
                  id: 'category-native-simple',
                }}
              >
                <option value='' />
                {this.renderBudgetOptions()}
              </Select>
            </FormControl>

            <FormControl style={{ display: 'block', marginBottom: '20px' }}>
              <InputLabel htmlFor='adornment-amount'>Amount</InputLabel>
              <Input
                type='number'
                inputProps={{
                  name: 'amount',
                  id: 'amount-native-simple',
                }}
                placeholder='Enter a number'
                onChange={this.handleChange}
                startAdornment={
                  <InputAdornment position='start'>$</InputAdornment>
                }
              />
              <Typography color='error' variant='body1'>
                * Budgets must be in increments of 5. {<br />}* Amounts less
                than 5 will default to $5.
              </Typography>
            </FormControl>
            <Button
              disabled={amount && category ? false : true}
              fullWidth
              variant='contained'
              color='secondary'
              onClick={this.handleAddNewBudget}
            >
              Add Budget
            </Button>
          </div>
        </Modal>
      </Fragment>
    );
  }

export default function OperationForm(props) {
  const classes = useStyles();
  const operation = props.operation;

  return (
    <div className={classes.formContainer}>
      <div className={classes.formGroup}>
        <FormControl fullWidth={true}>
          <InputLabel htmlFor="operation-title">오퍼레이션 명칭</InputLabel>
          <Input id="operation-title" value={operation.title}></Input>
        </FormControl>
      </div>

      <div className={classes.formGroup}>
        <FormControl fullWidth={true}>
          <TextField
            id="operation-description"
            label="오퍼레이션 설명"
            multiline
            rows={5}
            value={operation.desc}
            aria-describedby="description-helper-text"
            name="description"
            placeholder="API 이용자에게 안내되는 설명글 입니다. 데이터의 이해를 위한 설명을 친절히 작성해 주세요."
          />
        </FormControl>
      </div>

      <div className={classes.formGroup}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={3}>
            <FormControl fullWidth={true}>
              <InputLabel width="100%" htmlFor="operation-method">
                호출 방식
              </InputLabel>
              <Select
                labelId="operation-method"
                id="namespace-input"
                name="method"
                value={operation.method || 'GET'}
              >
                <MenuItem value={"GET"}>GET</MenuItem>
              </Select>
              <FormHelperText id="operation-method-text">Http metod를 선택해주세요. 현재 GET 기능만 지원합니다.</FormHelperText>
            </FormControl>
          </Grid>

          <Grid item xs={12} sm={9}>
            <FormControl fullWidth={true}>
              <InputLabel width="100%" htmlFor="operation-end-point">호출 주소</InputLabel>
              <Input id="operation-end-point" value={operation.endPoint || ''} aria-describedby="entityName-helper-text" name="entityName" />
              <FormHelperText id="operation-end-point-text">{`https://OOOOOO.go.kr/api/APINAME/v1/TEST`}</FormHelperText>
            </FormControl>  
          </Grid>
        </Grid>
      </div>
    </div>
  )
}

OptionsPicker = ({ value, handler, label, options }) => {
  const styles = useStyles();

  const { optionHandler, setRenderValue } = useFilter(options, handler);

  const filteredOptions = {};
  options.map((option) =>
    Object.assign(filteredOptions, { [option.value]: option.label })
  );

  return (
    <Badge
      badgeContent={value.length}
      color={materialUiConstants.styleError}
      anchorOrigin={badgePosition}
    >
      <FormControl className={styles.container}>
        <InputLabel id={materialUiConstants.checkBoxLabel}>{label}</InputLabel>
        <Select
          labelId={materialUiConstants.checkBoxLabel}
          id={materialUiConstants.checkBoxId}
          multiple
          value={value}
          onChange={optionHandler}
          renderValue={(selected) => setRenderValue(selected, filteredOptions)}
          input={<Input />}
          autoWidth
          MenuProps={MenuProps}
        >
          {options.map((item) => (
            <MenuItem key={item.value} value={item.value}>
              <Checkbox checked={value.indexOf(item.value) > -1} />
              <ListItemText primary={item.label} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Badge>
  );
}

render() {
        return (
            <div className="header-section">
                <Grid container spacing={3} justify="center" alignItems="center">
                    <Grid item xs={6} md={10} className='title-container'>
                        {/* <span className="logo">
                            <a href="http://karlzhu-se.github.io/ark-funds-monitor/">
                                <img height="90" width="120" src="https://ark-funds.com/wp-content/uploads/2020/07/ark-logo-1-1.svg" alt="ark-funds.com" title="" />
                            </a>
                        </span> */}
                        <a className='title' href="http://karlzhu-se.github.io/ark-funds-monitor/">
                            <span>ARK Funds Monitor</span>
                        </a>
                        {/* <div className="github-section">
                            <span>View it on</span>
                            <a className="github-icon" href="https://github.com/KarlZhu-SE/ark-funds-monitor" target="_blank" rel="noopener noreferrer" aria-label="Github">
                                <svg height="24" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
                            </a>
                        </div> */}
                    </Grid>

                    <Grid item xs={6} md={2} className="ticker-input-section">
                        <form onSubmit={this.handleSubmit}>
                            <FormControl>
                                <div>
                                    <Input
                                        id="ticker-textfield"
                                        value={this.state.inputTicker}
                                        onCompositionStart={this.handlingComposition}
                                        onCompositionUpdate={this.handlingComposition}
                                        onCompositionEnd={this.handleComposition}
                                        onChange={this.handleChange}
                                        onBlur={this.handleBlur}
                                        placeholder='Ticker'
                                        endAdornment={
                                            <InputAdornment position="start">
                                                <IconButton
                                                    aria-label="Search"
                                                    onClick={this.handleSubmit}
                                                    edge="end"
                                                >
                                                    <SearchIcon color="primary" />
                                                </IconButton>
                                            </InputAdornment>
                                        }
                                    />
                                </div>
                            </FormControl>
                        </form>
                    </Grid>
                </Grid>
            </div>
        );
    }

NavFilterByValues = ({
  filterByMultipleOptions: {
    filters,
    setFilterHandler,
    label,
    selectItems,
    objForTranslateRenderItems
  }
}) => {
  const styles = useStyles();

  const { optionHandler, setRenderValue } = useFilter(
    selectItems,
    setFilterHandler
  );

  return (
    <div className={styles.formblock}>
      <Badge
        badgeContent={filters.length}
        color={materialUiConstants.styleError}
        anchorOrigin={badgePosition}
      >
        <FormControl style={{ minWidth: 170 }} className={styles.formControl}>
          <InputLabel id={materialUiConstants.checkBoxLabel}>
            {label}
          </InputLabel>
          <Select
            labelId={materialUiConstants.checkBoxLabel}
            id={materialUiConstants.checkBoxId}
            multiple
            value={filters}
            onChange={optionHandler}
            renderValue={(selected) =>
              setRenderValue(selected, objForTranslateRenderItems)
            }
            input={<Input />}
            autoWidth
            MenuProps={MenuProps}
          >
            {selectItems.map((item) => (
              <MenuItem key={item.key} value={item.key}>
                <Checkbox checked={filters.indexOf(item.key) > -1} />
                <ListItemText primary={item.value} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Badge>
    </div>
  );
}

// ----------------------------------------------------------------------

export default function Searchbar() {
  const [isOpen, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen((prev) => !prev);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleClose}>
      <div>
        {!isOpen && (
          <IconButton onClick={handleOpen}>
            <Icon icon={searchFill} width={20} height={20} />
          </IconButton>
        )}

        <Slide direction="down" in={isOpen} mountOnEnter unmountOnExit>
          <SearchbarStyle>
            <Input
              autoFocus
              fullWidth
              disableUnderline
              placeholder="Search…"
              startAdornment={
                <InputAdornment position="start">
                  <Box
                    component={Icon}
                    icon={searchFill}
                    sx={{ color: 'text.disabled', width: 20, height: 20 }}
                  />
                </InputAdornment>
              }
              sx={{ mr: 1, fontWeight: 'fontWeightBold' }}
            />
            <Button variant="contained" onClick={handleClose}>
              Search
            </Button>
          </SearchbarStyle>
        </Slide>
      </div>
    </ClickAwayListener>
  );
}

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>
    </>
  );
}

ProductOptionsContainer = ({
  selectedOptions,
  setOptions,
  additions,
  toggleFieldsChanged
}) => {
  const styles = useStyles();
  const productOptions = useSelector(({ Products }) => Products.productOptions);
  const { sizes, bottomMaterials } = productOptions;

  const handleOptionChange = (event, name) => {
    toggleFieldsChanged(true);
    setOptions({ ...selectedOptions, [name]: event.target.value });
  };

  const handleAdditionChange = (event) => {
    toggleFieldsChanged(true);
    const { name, checked } = event.target;
    setOptions({ ...selectedOptions, [name]: checked });
  };

  const handleDeleteOption = (option, name) => {
    toggleFieldsChanged(true);
    const currentOption = selectedOptions[option];
    const sizeToRemove = currentOption.indexOf(name);
    setOptions({
      ...selectedOptions,
      [option]: [
        ...currentOption.slice(0, sizeToRemove),
        ...currentOption.slice(sizeToRemove + 1)
      ]
    });
  };

  const getCardItems = (items, option, labels) =>
    items
      .filter(({ name }) =>
        selectedOptions[option].some((item) => item === name)
      )
      .map((item) => {
        const cardContent = labels.map(({ label, name }) => (
          <Typography key={name}>
            {label}: {item[name]}
          </Typography>
        ));
        const priceDetail = (
          <Typography>
            {ADDITIONAL_PRICE}: {item.additionalPrice[0].value / 100}
          </Typography>
        );

        return (
          <Grid item key={item.name}>
            <Card>
              <CardContent>
                <Grid container justify='flex-end'>
                  <Tooltip title={DELETE_PRODUCT_BTN} placement='top'>
                    <IconButton
                      className={styles.removeIcon}
                      onClick={() => handleDeleteOption(option, item.name)}
                    >
                      <CloseIcon />
                    </IconButton>
                  </Tooltip>
                </Grid>
                {cardContent}
                {priceDetail}
              </CardContent>
            </Card>
          </Grid>
        );
      });

  const getOptions = (name, _id) => (
    <MenuItem value={name} key={_id}>
      {name}
    </MenuItem>
  );

  const sortSizes = (a, b) => {
    if (a.name > b.name) {
      return -1;
    }
    if (b.name > a.name) {
      return 1;
    }
    return 0;
  };

  const sizesOptions = useMemo(
    () =>
      sizes
        .slice()
        .sort(sortSizes)
        .map(({ name, _id }) => getOptions(name, _id)),
    [sizes]
  );

  const bottomMaterialsOptions = useMemo(
    () =>
      bottomMaterials.map(({ name, _id }) => getOptions(name[0].value, _id)),
    [bottomMaterials]
  );

  const formattedMaterials = useMemo(
    () =>
      bottomMaterials.map((item) => ({ ...item, name: item.name[0].value })),
    [bottomMaterials]
  );

  const optionsToMap = useMemo(
    () => [sizesOptions, bottomMaterialsOptions],
    [sizesOptions, bottomMaterialsOptions]
  );
  const cardLabels = useMemo(() => [sizeCardsLabels, materialsLabels], []);
  const cardOptions = useMemo(
    () => [sizes, formattedMaterials],
    [sizes, formattedMaterials]
  );

  return (
    <div>
      {optionsLabels.map(({ label, name }, idx) => (
        <div key={name}>
          {!!selectedOptions[name].length && <Box mt={2.5} />}
          <Grid container className={styles.select}>
            <Grid item>
              <Badge
                color='error'
                anchorOrigin={badgePosition}
                badgeContent={selectedOptions[name].length}
              >
                <FormControl className={styles.formControl}>
                  <InputLabel id='multiple-checkbox-label'>{label}</InputLabel>
                  <Select
                    required
                    labelId='multiple-checkbox-label'
                    id='multiple-checkbox'
                    multiple
                    value={selectedOptions[name]}
                    onChange={(e) => handleOptionChange(e, name)}
                    input={<Input />}
                  >
                    {optionsToMap[idx]}
                  </Select>
                </FormControl>
              </Badge>
            </Grid>
            <Grid item container spacing={2} className={styles.gridContainer}>
              {getCardItems(cardOptions[idx], name, cardLabels[idx])}
            </Grid>
          </Grid>
        </div>
      ))}
      <Grid container className={styles.checkbox}>
        <FormControlLabel
          control={
            <Checkbox
              checked={selectedOptions.additions}
              onChange={handleAdditionChange}
              name='additions'
              color='primary'
            />
          }
          label={
            !!(additions && additions.length) && (
              <div>
                {additions[0].name[0].value}
                <span>
                  (
                  <span className={styles.additionalPrice}>
                    +{additions[0].additionalPrice[0].value / 100}
                    {` ${UAH}`}
                  </span>
                  )
                </span>
              </div>
            )
          }
        />
      </Grid>
    </div>
  );
}

render() {
    //console.log("Rendering JoystickSettings");
    const new_state = _.cloneDeep(this.state);
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="joystick-settings"
      >
        <DialogTitle id="joystick-settings">Joystick settings</DialogTitle>
        <DialogContent>
          <Grid container spacing={1} direction="row" alignItems="center">
            <Grid item xs={6}>
              <Grid container alignItems="center" spacing={2}>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_0_neg">axis_0 negative</InputLabel>
                    <Input
                      id="axis_0_neg"
                      value={new_state.axes_scale[0][0]}
                      onChange={event => { new_state.axes_scale[0][0] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_0 negative',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_0_pos">axis_0 positive</InputLabel>
                    <Input
                      id="axis_0_pos"
                      value={new_state.axes_scale[0][1]}
                      onChange={event => { new_state.axes_scale[0][1] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_0 positive',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_1_neg">axis_1 negative</InputLabel>
                    <Input
                      id="axis_1_neg"
                      value={new_state.axes_scale[1][0]}
                      onChange={event => { new_state.axes_scale[1][0] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_1 negative',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_1_pos">axis_1 positive</InputLabel>
                    <Input
                      id="axis_1_pos"
                      value={new_state.axes_scale[1][1]}
                      onChange={event => { new_state.axes_scale[1][1] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_1 positive',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor=">axis_0_deadzone">axis_0 deadzone</InputLabel>
                    <Input
                      id="axis_0_deadzone"
                      value={new_state.axes_deadzone[0]}
                      onChange={event => { new_state.axes_deadzone[0] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_0 deadzone',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor="axis_1_deadzone">axis_1 deadzone</InputLabel>
                    <Input
                      id="axis_1_deadzone"
                      value={new_state.axes_deadzone[1]}
                      onChange={event => { new_state.axes_deadzone[1] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_1 deadzone',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor='axis_0_mode'>axis_0 mode</InputLabel>
                    <Select
                      id='axis_0_mode'
                      value={new_state.axesMode[0]}
                      onChange={event => { new_state.axesMode[0] = event.target.value; this.setState(new_state); }}
                      displayEmpty
                      inputProps={{ 'aria-label': 'axis_0 mode' }}
                    >
                      <MenuItem value='interceptor'>interceptor</MenuItem>
                      <MenuItem value='injector'>injector</MenuItem>
                      <MenuItem value='adder'>adder</MenuItem>
                    </Select>
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor='axis_1_mode'>axis_1 mode</InputLabel>
                    <Select
                      id='axis_1_mode'
                      value={new_state.axesMode[1]}
                      onChange={event => { new_state.axesMode[1] = event.target.value; this.setState(new_state); }}
                      displayEmpty
                      inputProps={{ 'aria-label': 'axis_1 mode', }}
                    >
                      <MenuItem value='interceptor'>interceptor</MenuItem>
                      <MenuItem value='injector'>injector</MenuItem>
                      <MenuItem value='adder'>adder</MenuItem>
                    </Select>
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControlLabel
                    control={<Switch checked={new_state.restJoystick_0} onChange={() => { new_state.restJoystick_0 = !new_state.restJoystick_0; this.setState(new_state); }} name="restJoystick_0" />}
                    label="vJoystick_0 rest"
                  />
                </Grid>
              </Grid>
            </Grid>
            <Grid item xs={6}>
              <Grid container alignItems="center" spacing={2}>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_2_neg">axis_2 negative</InputLabel>
                    <Input
                      id="axis_2_neg"
                      value={new_state.axes_scale[2][0]}
                      onChange={event => { new_state.axes_scale[2][0] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_2 negative',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_2_pos">axis_2 positive</InputLabel>
                    <Input
                      id="axis_2_pos"
                      value={new_state.axes_scale[2][1]}
                      onChange={event => { new_state.axes_scale[2][1] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_2 positive',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_3_neg">axis_3 negative</InputLabel>
                    <Input
                      id="axis_3_neg"
                      value={new_state.axes_scale[3][0]}
                      onChange={event => { new_state.axes_scale[3][0] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_3 negative',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6} align="center">
                  <FormControl>
                    <InputLabel htmlFor="axis_3_pos">axis_3 positive</InputLabel>
                    <Input
                      id="axis_3_pos"
                      value={new_state.axes_scale[3][1]}
                      onChange={event => { new_state.axes_scale[3][1] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_3 positive',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor=">axis_2_deadzone">axis_2 deadzone</InputLabel>
                    <Input
                      id="axis_2_deadzone"
                      value={new_state.axes_deadzone[2]}
                      onChange={event => { new_state.axes_deadzone[2] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_2 deadzone',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor="axis_3_deadzone">axis_3 deadzone</InputLabel>
                    <Input
                      id="axis_3_deadzone"
                      value={new_state.axes_deadzone[3]}
                      onChange={event => { new_state.axes_deadzone[3] = event.target.value; this.setState(new_state); }}
                      inputProps={{
                        'aria-label': 'axis_3 deadzone',
                        style: { textAlign: 'center' }
                      }}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor='axis_2_mode'>axis_2 mode</InputLabel>
                    <Select
                      id='axis_2_mode'
                      value={new_state.axesMode[2]}
                      onChange={event => { new_state.axesMode[2] = event.target.value; this.setState(new_state); }}
                      displayEmpty
                      inputProps={{ 'aria-label': 'axis_2 mode' }}
                    >
                      <MenuItem value='interceptor'>interceptor</MenuItem>
                      <MenuItem value='injector'>injector</MenuItem>
                      <MenuItem value='adder'>adder</MenuItem>
                    </Select>
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControl fullWidth>
                    <InputLabel htmlFor='axis_3_mode'>axis_3 mode</InputLabel>
                    <Select
                      id='axis_3_mode'
                      value={new_state.axesMode[3]}
                      onChange={event => { new_state.axesMode[3] = event.target.value; this.setState(new_state); }}
                      displayEmpty
                      inputProps={{ 'aria-label': 'axis_3 mode', }}
                    >
                      <MenuItem value='interceptor'>interceptor</MenuItem>
                      <MenuItem value='injector'>injector</MenuItem>
                      <MenuItem value='adder'>adder</MenuItem>
                    </Select>
                  </FormControl>
                </Grid>
                <Grid item xs={12} align="center">
                  <FormControlLabel
                    control={<Switch checked={new_state.restJoystick_1} onChange={() => { new_state.restJoystick_1 = !new_state.restJoystick_1; this.setState(new_state); }} name="restJoystick_1" />}
                    label="vJoystick_1 rest"
                  />
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.setSettings(this.state)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

Projects = () => {
  const classes = useStyles();

  const [page, setPage] = useState(1);
  const [searchInput, setSearchInput] = useState("");
  const handleChange = (event, value) => {
    setPage(value);
    fetchData({ query: { page: value, q: searchInput } });
  };
  const debouncedSearch = useCallback(
    () => debounce((value) => fetchData({ query: { page, q: value } }), 500),
    [page]
  );
  const handleChangeSearch = (value) => {
    setSearchInput(value);
    debouncedSearch(value);
  };
  const [rows, setData] = useState({});
  const [meta, setMeta] = useState({});
  const fetchData = ({ query }) => {
    GitlabLintHttpClient("GET_ALL", { entity: "projects", query: query })
      .then((data) => {
        setData(data.data);
        setMeta(data.meta);
      })
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    fetchData({ query: { page: 1 } });
  }, []);

  if (Object.keys(rows).length === 0 && rows.constructor === Object) {
    return <Loading />;
  }

  return (
    <React.Fragment>
      <div className={classes.header}>
        <Typography variant="h4" paragraph>
          Projects
        </Typography>
        <form noValidate autoComplete="off">
          <Input
            placeholder="Find a project..."
            value={searchInput}
            onChange={(e) => handleChangeSearch(e.target.value)}
          />
        </form>
      </div>
      <List>
        {rows.map((row) => {
          return (
            <ListItem
              button
              component={Link}
              to={`/projects/${row.id}`}
              key={row.id}
            >
              <ListItemText primary={row.path_with_namespace} />
              <div className={classes.levels}>
                {Object.keys(row.rules).map((key, index) => {
                  return (
                    <Tooltip key={key} title={key} placement="top-start">
                      <Chip
                        className={`${classes.level} ${classes[key]}`}
                        label={row.rules[key]}
                        size="small"
                      />
                    </Tooltip>
                  );
                })}
              </div>
            </ListItem>
          );
        })}
      </List>
      <div className={classes.pagination}>
        <Pagination
          boundaryCount={2}
          color="primary"
          count={meta.totalOfPages}
          onChange={handleChange}
          page={page}
          siblingCount={2}
        />
      </div>
    </React.Fragment>
  );
}

function ArtistForm({ artists }) {
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [message, setMessage] = useState({ type: "", text: "" });
  const [formData, handleChange, formRef, clearForm] = useForm({
    name: "",
    description: "",
    imageUrl: "",
    image: null,
  });

  const handleAddArtistForm = async (e) => {
    e.preventDefault();
    setMessage({ type: "", message: "" });
    const name = capitalizeAllWords(formData.name);
    const names = createNamesArrayWithCaptitalizedWords(formData.name);
    const { description, imageUrl } = formData;
    const data = { description, name, names, imageUrl };

    // validations
    if (artists.includes(name)) {
      return setMessage({
        type: "error",
        text: `${name} already exists in DB`,
      });
    } else if (!data.imageUrl && !formData.image) {
      return setMessage({
        type: "error",
        text: "Either image URL should be provided or Image should be uploaded",
      });
    } else if (data.imageUrl && !isValidURL(data.imageUrl)) {
      return setMessage({
        type: "error",
        text: "Invliad image URL",
      });
    } else if (formData.image && !formData.image?.type.startsWith("image")) {
      return setMessage({
        type: "error",
        text: "File must be of type image",
      });
    }

    setLoading(true);
    if (formData.image) {
      const uploadTask = uploadArtistToStorage(formData.image);

      uploadTask.on(
        "state_change",
        ({ bytesTransferred, totalBytes }) => {
          setProgress(Math.round((bytesTransferred / totalBytes) * 100));
        },
        handleError,
        () => {
          getArtistImageURL(uploadTask.snapshot.ref)
            .then(async (url) => {
              console.log(url);
              data.imageUrl = url; // adding the recived Url
              await addArtist(data).catch(handleError);
              setMessage({
                type: "textPrimary",
                text: "Artist added",
              });
              clearForm();
            })
            .catch(handleError);
        }
      ); // end of UploadTask
    } else if (data.imageUrl) {
      await addArtist(data).catch(handleError);
      setMessage({
        type: "textPrimary",
        text: "Artist added",
      });
      clearForm();
    } else
      setMessage({
        type: "error",
        text: "Either image URL should be provided or Image should be uploaded",
      });

    setLoading(false);
  };

  return (
    <form
      ref={formRef}
      onSubmit={handleAddArtistForm}
      className="admin__form"
      autoComplete="off"
    >
      <Typography align="center" variant="h5">
        Add Artist to DB
      </Typography>
      <div className="admin__formGroup">
        <TextField
          name="name"
          value={formData.name}
          onChange={handleChange}
          label="Artist Name"
          required
          fullWidth
          color="secondary"
        />
      </div>
      <div className="admin__formGroup">
        <TextField
          name="description"
          value={formData.description}
          onChange={handleChange}
          label="Description"
          required
          fullWidth
          color="secondary"
        />
      </div>
      <div className="admin__formGroup">
        <TextField
          name="imageUrl"
          value={formData.imageUrl}
          onChange={handleChange}
          label="Image Url (Not needed if uploading image)"
          fullWidth
          color="secondary"
        />
      </div>
      <div className="admin__formGroup">
        <Input
          name="image"
          type="file"
          accept="image/*"
          color="secondary"
          onChange={handleChange}
        />
      </div>
      <div className="admin__formGroup">
        <LinearProgress
          value={progress}
          variant="determinate"
          color="secondary"
        />
      </div>
      {message.text && (
        <div
          className="admin__formGroup admin__formMessage"
          style={{ backgroundColor: "#f5f5f5" }}
        >
          <Typography color={message.type} variant="subtitle1">
            <strong>{message.text}</strong>
          </Typography>
        </div>
      )}
      <Button
        onClick={() => {
          setMessage({ type: "", message: "" });
          clearForm();
        }}
        type="button"
        variant="contained"
        color="default"
      >
        Clear
      </Button>
      &nbsp; &nbsp;
      <Button
        disabled={loading}
        type="submit"
        variant="contained"
        color="secondary"
      >
        Add
      </Button>
    </form>
  );
}

export default function BigStat(props) {
  var { product, total, color, registrations, bounce } = props;
  var classes = useStyles();
  var theme = useTheme();

  // local
  var [value, setValue] = useState("daily");

  return (
    <Widget
      header={
        <div className={classes.title}>
          <Typography variant="h5">{product}</Typography>

          <Select
            value={value}
            onChange={e => setValue(e.target.value)}
            input={
              <Input
                disableUnderline
                classes={{ input: classes.selectInput }}
              />
            }
            className={classes.select}
          >
            <MenuItem value="daily">Daily</MenuItem>
            <MenuItem value="weekly">Weekly</MenuItem>
            <MenuItem value="monthly">Monthly</MenuItem>
          </Select>
        </div>
      }
      upperTitle
      bodyClass={classes.bodyWidgetOverflow}
    >
      <div className={classes.totalValueContainer}>
        <div className={classes.totalValue}>
          <Typography size="xxl" color="text" colorBrightness="secondary">
            {total[value]}
          </Typography>
          <Typography color={total.percent.profit ? "success" : "secondary"}>
            &nbsp;{total.percent.profit ? "+" : "-"}
            {total.percent.value}%
          </Typography>
        </div>
        <BarChart width={150} height={70} data={getRandomData()}>
          <Bar
            dataKey="value"
            fill={theme.palette[color].main}
            radius={10}
            barSize={10}
          />
        </BarChart>
      </div>
      <div className={classes.bottomStatsContainer}>
        <div className={classnames(classes.statCell, classes.borderRight)}>
          <Grid container alignItems="center">
            <Typography variant="h6">{registrations[value].value}</Typography>
            <ArrowForwardIcon
              className={classnames(classes.profitArrow, {
                [!registrations[value].profit]: classes.profitArrowDanger,
              })}
            />
          </Grid>
          <Typography size="sm" color="text" colorBrightness="secondary">
            Registrations
          </Typography>
        </div>
        <div className={classes.statCell}>
          <Grid container alignItems="center">
            <Typography variant="h6">{bounce[value].value}%</Typography>
            <ArrowForwardIcon
              className={classnames(classes.profitArrow, {
                [!registrations[value].profit]: classes.profitArrowDanger,
              })}
            />
          </Grid>
          <Typography size="sm" color="text" colorBrightness="secondary">
            Bounce Rate
          </Typography>
        </div>
        <div className={classnames(classes.statCell, classes.borderRight)}>
          <Grid container alignItems="center">
            <Typography variant="h6">
              {registrations[value].value * 10}
            </Typography>
            <ArrowForwardIcon
              className={classnames(classes.profitArrow, {
                [classes.profitArrowDanger]: !registrations[value].profit,
              })}
            />
          </Grid>
          <Typography size="sm" color="text" colorBrightness="secondary">
            Views
          </Typography>
        </div>
      </div>
    </Widget>
  );
}

function PublicProjects (props) {
  const classes = useStyles()
  const dispatch = useDispatch()

  const projects = useSelector(state => state.dashboardReducer.publicProjects)
  const [sort, setSort] = React.useState('')
  const [order, setOrder] = React.useState('ascending')
  const [filteredProjects, setFilteredProjects] = React.useState(projects)
  const [anchorEl, setAnchorEl] = React.useState(null)
  const open = Boolean(anchorEl)
  useEffect(() => {
    dispatch(fetchPublicProjects())
  }, [dispatch])
  useEffect(() => {
    setFilteredProjects(projects)
  }, [projects])
  const handleFilterOpen = (e) => {
    if (anchorEl) {
      setAnchorEl(null)
    } else {
      setAnchorEl(e.currentTarget)
    }
  }
  const sortSaves = (sorting, order) => {
    if (order === 'ascending') {
      if (sorting === 'name') {
        setFilteredProjects(filteredProjects.sort((a, b) => a.title > b.title))
      } else if (sorting === 'author') {
        setFilteredProjects(filteredProjects.sort((a, b) => a.author > b.author))
      } else if (sorting === 'status') {
        setFilteredProjects(filteredProjects.sort((a, b) => a.status_name > b.status_name))
      }
    } else {
      if (sorting === 'name') {
        setFilteredProjects(filteredProjects.sort((a, b) => a.title < b.title))
      } else if (sorting === 'author') {
        setFilteredProjects(filteredProjects.sort((a, b) => a.author < b.author))
      } else if (sorting === 'status') {
        setFilteredProjects(filteredProjects.sort((a, b) => a.status_name < b.status_name))
      }
    }
  }
  const handleSort = (e) => {
    sortSaves(e.target.value, order)
    setSort(e.target.value)
  }
  const handleOrder = (e) => {
    setOrder(e.target.value)
    if (sort !== '') {
      sortSaves(sort, e.target.value)
    }
  }
  const onSearch = (e) => {
    setFilteredProjects(projects.filter((o) =>
      // eslint-disable-next-line
      Object.keys(o).some((k) => {
        if ((k === 'title' || k === 'description' || k === 'author' || k === 'status_name') && String(o[k]).toLowerCase().includes(e.target.value.toLowerCase())) {
          return String(o[k]).toLowerCase().includes(e.target.value.toLowerCase())
        }
      }
      )
    ))
  }
  return (
    <div className={classes.root}>
      <CssBaseline />
      <Container maxWidth="lg" className={classes.header}>
        <Grid
          container
          direction="row"
          justify="flex-start"
          alignItems="flex-start"
          alignContent="center"
          spacing={3}
        >
          {/* eSim Gallery Header */}
          <Grid item xs={12}>
            <MainCard />
          </Grid>
          <Grid item xs={12}>
            {filteredProjects && <IconButton onClick={handleFilterOpen} style={{ float: 'right' }} ><FilterListIcon /></IconButton>}
            {filteredProjects && <Input style={{ float: 'right' }} onChange={(e) => onSearch(e)} placeholder='Search' />}
            <Popover
              open={open}
              onClose={handleFilterOpen}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'center'
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center'
              }}
              anchorEl={anchorEl}
            >
              <FormControl style={{ width: ' 200px', padding: '2%' }}>
                <InputLabel>Select Sort</InputLabel>
                <Select className={classes.popover} value={sort} onChange={handleSort} >
                  <MenuItem key='name' value='name'>Name</MenuItem>
                  <MenuItem key='author' value='author'>Author</MenuItem>
                  <MenuItem key='status' value='status'>Status</MenuItem>
                </Select>
              </FormControl>
              <FormControl style={{ width: ' 200px', padding: '2%' }}>
                <InputLabel>Select Order</InputLabel>
                <Select className={classes.popover} value={order} onChange={handleOrder} >
                  <MenuItem key='ascending' value='ascending'>Ascending</MenuItem>
                  <MenuItem key='descending' value='descending'>Descending</MenuItem>
                </Select>
              </FormControl>
            </Popover>
          </Grid>
          {/* Listing Gallery Schematics */}
          {filteredProjects.map(
            (pub) => {
              console.log(pub)
              return (
                <Grid item xs={12} sm={6} lg={4} key={pub.save_id}>
                  <ProjectCard pub={pub} is_review={true} />
                </Grid>
              )
            })}

        </Grid>
      </Container>
    </div>
  )
}

EditModal = ({
  openEdit,
  setOpenEdit,
  isUpload,
  selectedItem,
  styles,
  upload,
  updateRegion,
  updateCollection,
  showSnackbar,
}) => {
  const [errors, setErrors] = useState({});
  const [id, setId] = useState(undefined);
  const [ownerId, setOwnerId] = useState(undefined);
  const [name, setName] = useState(undefined);
  const [regionNameProperty, setRegionNameProperty] = useState(undefined);
  const [show, setShow] = useState(true);
  const [calc, setCalc] = useState(true);
  const [geojson, setGeoJson] = useState(undefined);
  const [shape, setShape] = useState(undefined);
  const [isCollection, setIsCollection] = useState(false);
  const [saveInProgress, setSaveInProgress] = useState(false);
  const [shapeProperties, setShapeProperties] = useState([]);
  const { orgList, userHasOrg } = useContext(AppContext);

  const reset = () => {
    setShape(undefined);
    setGeoJson(undefined);
    setRegionNameProperty(undefined);
    setId(undefined);
    setName(undefined);
    setRegionNameProperty(undefined);
    setShow(true);
    setCalc(true);
    setIsCollection(false);
    setOwnerId(undefined);
    setErrors({});
  };

  useEffect(() => {
    reset();
    if (selectedItem) {
      setId(selectedItem.id);
      setOwnerId(selectedItem.owner_id);
      setName(selectedItem.name);
      if (selectedItem.isCollection) {
        setIsCollection(true);
      } else {
        setShow(selectedItem.show_on_org_map);
        setCalc(selectedItem.calculate_statistics);
      }
    } else {
      setOwnerId(getOrganizationUUID());
    }
  }, [selectedItem]);

  useEffect(() => {
    if (shape?.type?.endsWith('Collection')) {
      setIsCollection(true);
      setShapeProperties(
        (shape?.features || []).reduce((props, feature) => {
          return [
            ...new Set([...props, ...Object.keys(feature.properties || {})]),
          ];
        }, [])
      );
    } else {
      setShapeProperties(shape?.properties || []);
    }
  }, [shape]);

  useEffect(() => {
    // Auto-set to "name" if present
    const nameProp = shapeProperties?.find(
      (prop) => prop.toLowerCase() === 'name'
    );
    if (nameProp) {
      setRegionNameProperty(nameProp);
    }
  }, [shapeProperties]);

  const onOwnerChange = (e) => {
    setOwnerId(e.target.value);
    setErrors((prev) => ({
      ...prev,
      owner: undefined,
    }));
  };

  const onNameChange = (e) => {
    setName(e.target.value);
    setErrors((prev) => ({
      ...prev,
      name: undefined,
    }));
  };

  const onRegionNamePropertyChange = (e) => {
    setRegionNameProperty(e.target.value);
    setErrors((prev) => ({
      ...prev,
      name: undefined,
    }));
  };

  const onShowChange = (e) => {
    setShow(e.target.checked);
  };

  const onCalcChange = (e) => {
    setCalc(e.target.checked);
  };

  const onFileChange = (e) => {
    setErrors((prev) => ({
      ...prev,
      shape: undefined,
    }));
    const fileread = new FileReader();
    try {
      fileread.onload = function (e) {
        const content = e.target.result;
        const json = JSON.parse(content);
        setShape(json);
      };
    } catch (error) {
      setErrors((prev) => ({
        ...prev,
        shape: `Failed to process shape file: ${error}`,
      }));
    }
    fileread.readAsText(e.target.files[0]);
    setGeoJson(e.target.value);
  };

  const handleEditDetailClose = () => {
    setOpenEdit(false);
  };

  const handleSave = async () => {
    let hasError = false;
    if (isUpload) {
      if (!shape) {
        hasError = true;
        setErrors((prev) => {
          return { ...prev, shape: 'Please select a shape file.' };
        });
      } else if (!regionNameProperty) {
        hasError = true;
        setErrors((prev) => {
          return { ...prev, name: 'Please select a region name property.' };
        });
      }
    }

    if ((!isUpload || isCollection) && !name) {
      hasError = true;
      setErrors((prev) => {
        return {
          ...prev,
          name: `Please enter a name for the ${
            isCollection ? 'collection' : 'region'
          }.`,
        };
      });
    }

    if (!hasError) {
      setSaveInProgress(true);
      let res;
      try {
        if (isUpload) {
          res = await upload({
            id,
            owner_id: ownerId,
            collection_name: isCollection ? name : undefined,
            region_name_property: regionNameProperty,
            shape,
            show_on_org_map: show,
            calculate_statistics: calc,
          });
        } else {
          if (isCollection) {
            res = await updateCollection({
              id,
              owner_id: ownerId,
              name,
            });
          } else {
            res = await updateRegion({
              id,
              owner_id: ownerId,
              name,
              show_on_org_map: show,
              calculate_statistics: calc,
            });
          }
        }

        if (res?.error) {
          throw res.message;
        } else {
          showSnackbar(
            `${isCollection ? 'Collection' : res?.region?.name} ${
              isUpload ? 'uploaded' : 'updated'
            }`
          );
          setOpenEdit(false);
        }
      } catch (error) {
        // TO DO - report the error details
        alert(`Upload failed: ${error}`);
      }
      setSaveInProgress(false);
    }
  };

  return (
    <Dialog open={openEdit} aria-labelledby="form-dialog-title">
      <DialogTitle id="form-dialog-title">
        {isUpload
          ? 'Upload New Region or Collection'
          : `Edit ${isCollection ? 'Collection' : 'Region'}`}
      </DialogTitle>
      <DialogContent>
        {isUpload && (
          <>
            <Grid container>
              <Grid item className={styles.input}>
                <Input
                  type="file"
                  value={geojson || ''}
                  onChange={onFileChange}
                  inputProps={{
                    accept: '.json,.geojson',
                  }}
                  error={errors.shape ? true : false}
                />
              </Grid>
            </Grid>
            {shape && (
              <Grid container>
                <Grid item className={styles.input}>
                  <Typography>
                    {isCollection ? 'Collection' : 'Region'}
                  </Typography>
                </Grid>
              </Grid>
            )}
          </>
        )}
        <Grid container>
          {!userHasOrg && (
            <Grid item className={styles.owner}>
              <TextField
                error={errors.owner ? true : false}
                helperText={errors.owner}
                select
                className={styles.input}
                id="owner"
                label="Owner"
                value={ownerId || ''}
                onChange={onOwnerChange}
                fullWidth
              >
                <MenuItem key={'null'} value={null}>
                  No owner
                </MenuItem>
                {orgList.length &&
                  orgList.map((org) => (
                    <MenuItem
                      key={org.stakeholder_uuid}
                      value={org.stakeholder_uuid}
                    >
                      {org.name}
                    </MenuItem>
                  ))}
              </TextField>
            </Grid>
          )}

          <Grid item>
            {(!isUpload || isCollection) && (
              <TextField
                error={errors.name ? true : false}
                helperText={errors.name}
                id="name"
                label={`${isCollection ? 'Collection' : 'Region'} Name`}
                type="text"
                variant="outlined"
                fullWidth
                value={name || ''}
                className={styles.input}
                onChange={onNameChange}
              />
            )}
            {isUpload && (
              <TextField
                select
                error={errors.name ? true : false}
                helperText={errors.name}
                id="prop"
                label="Region Name Property"
                type="text"
                variant="outlined"
                fullWidth
                value={regionNameProperty || ''}
                className={styles.input}
                onChange={onRegionNamePropertyChange}
              >
                {shapeProperties.length ? (
                  shapeProperties.map((prop) => (
                    <MenuItem key={prop} value={prop}>
                      {prop}
                    </MenuItem>
                  ))
                ) : (
                  <MenuItem key={'null'} value={null}>
                    No properties found
                  </MenuItem>
                )}
              </TextField>
            )}
          </Grid>
          {!isCollection && (
            <FormGroup row={true}>
              <FormControlLabel
                control={<Switch checked={show} onChange={onShowChange} />}
                label="Show on Organization Map"
              />
              <FormControlLabel
                control={<Switch checked={calc} onChange={onCalcChange} />}
                label="Calculate Statistics"
              />
            </FormGroup>
          )}
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleEditDetailClose} disabled={saveInProgress}>
          Cancel
        </Button>
        <Button
          onClick={handleSave}
          variant="contained"
          color="primary"
          disabled={saveInProgress}
        >
          {saveInProgress ? (
            <CircularProgress size={21} />
          ) : isUpload ? (
            'Upload'
          ) : (
            'Save'
          )}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

AdminEventList = props => {
  // Declare Create, Update, and Delete mutation functions
  const [CreateEvent] = useMutation(CREATE_EVENT);
  const [UpdateEvent] = useMutation(UPDATE_EVENT);
  const [DeleteEvent] = useMutation(DELETE_EVENT);

  // Grab the events data from props
  const events = props.events;
  //commented out to remove console warning, eventType defined but never used
  //const eventType = props.events.type;

  const useStyles = makeStyles({
    grid: {
      maxWidth: "120rem",
      marginLeft: "3rem",
      "& .MuiButton-label": {
        fontSize: "1.6rem",
        fontWeight: "500",
      },
    },
    tableHead: {
      "& th": {
        fontSize: "1.6rem",
      },
    },
    addBtn: {
      color: "#2763FF",
      textTransform: "none",
    },
    img: { width: "15rem", objectFit: "contain" },
    label: {
      marginTop: ".8rem",
      color: "red",
      fontSize: "1rem",
    },
  });
  const classes = useStyles();
  // This code is returning a material table object
  // For more info on material table, please visit their docs at
  // https://material-table.com/
  return (
    <Grid className={classes.grid}>
      <MaterialTable
        components={{
          Pagination: props => (
            <TablePagination
              {...props}
              SelectProps={{
                style: {
                  fontSize: "1.4rem",
                },
              }}
            />
          ),
        }}
        title=""
        columns={[
          {
            title: "Title",
            field: "title",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "20rem",
                }}
              >
                {rowData.title}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="text"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Type",
            field: "type",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "10rem",
                }}
              >
                {rowData.type}
              </div>
            ),
            editComponent: props => (
              <>
                <Select
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                >
                  <MenuItem value="In Person">In Person</MenuItem>
                  <MenuItem value="Webinar">Webinar</MenuItem>
                </Select>
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Host",
            field: "host",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "16rem",
                }}
              >
                {rowData.host}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Speakers",
            field: "speakers",
            render: rowData => (
              <div
                style={{
                  overflow: "scroll",
                  maxHeight: "10rem",
                  fontSize: "1.6rem",
                  width: "20rem",
                }}
              >
                {rowData.speakers}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },

          {
            title: "Start Time",
            field: "startTime",
            editComponent: props => (
              <Input
                type="time"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Start Date",
            field: "startDate",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "9rem",
                }}
              >
                {rowData.startDate}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="date"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "End Date",
            field: "endDate",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "9rem",
                }}
              >
                {rowData.endDate}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="date"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Location",
            field: "location",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "14rem",
                }}
              >
                {rowData.location}
              </div>
            ),
            editComponent: props => (
              <>
                <Input
                  type="text"
                  value={props.value}
                  onChange={e => props.onChange(e.target.value)}
                />
                <InputLabel className={classes.label}>*Required</InputLabel>
              </>
            ),
          },
          {
            title: "Link",
            field: "link",
            render: rowData => (
              <div
                style={{
                  overflow: "scroll",
                  fontSize: "1.6rem",
                  width: "22rem",
                }}
              >
                {rowData.link}
              </div>
            ),
            editComponent: props => (
              <Input
                type="url"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Image Url",
            field: "imgUrl",
            render: rowData => (
              <img
                style={{
                  maxHeight: "12rem",
                }}
                src={rowData.imgUrl}
                alt="Event"
                className={classes.img}
              />
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Sponsors",
            field: "sponsors",
            render: rowData => (
              <div
                style={{
                  overflow: "scroll",
                  fontSize: "1.6rem",
                  width: "20rem",
                }}
              >
                {rowData.sponsors}
              </div>
            ),
            editComponent: props => (
              <Input
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
          {
            title: "Details",
            field: "details",
            render: rowData => (
              <div
                style={{
                  fontSize: "1.6rem",
                  width: "30rem",
                  maxHeight: "14rem",
                  overflow: "scroll",
                }}
              >
                {rowData.details}
              </div>
            ),
            editComponent: props => (
              <textarea
                style={{
                  fontSize: "1.6rem",
                }}
                rows="8"
                cols="60"
                type="text"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
              />
            ),
          },
        ]}
        data={events}
        editable={{
          onRowAdd: async newData => {
            await CreateEvent({
              variables: {
                title: newData.title,
                type: newData.type,
                host: newData.host,
                speakers: newData.speakers,
                startTime: newData.startTime,
                startDate: newData.startDate,
                endDate: newData.endDate,
                location: newData.location,
                imgUrl: newData.imgUrl,
                sponsors: newData.sponsors,
                details: newData.details,
                link: newData.link,
              },
            });
            props.eventsRefetch();
          },
          onRowUpdate: async (newData, oldData) => {
            await UpdateEvent({
              variables: {
                id: newData.id,
                title: newData.title,
                type: newData.type,
                host: newData.host,
                speakers: newData.speakers,
                startTime: newData.startTime,
                startDate: newData.startDate,
                endDate: newData.endDate,
                location: newData.location,
                imgUrl: newData.imgUrl,
                sponsors: newData.sponsors,
                details: newData.details,
                link: newData.link,
              },
            });
            props.eventsRefetch();
          },
          onRowDelete: async oldData => {
            await DeleteEvent({
              variables: {
                id: oldData.id,
              },
            });
            props.eventsRefetch();
          },
        }}
        icons={{
          Add: () => (
            <>
              <AddCircleOutlineIcon
                style={{ color: "#2962FF" }}
                fontSize="large"
              />
              <Button className={classes.addBtn}>Add Event</Button>
            </>
          ),
          Edit: () => (
            <EditIcon style={{ color: "#2962FF" }} fontSize="large" />
          ),
          Delete: () => (
            <DeleteIcon style={{ color: "#2962FF" }} fontSize="large" />
          ),
        }}
        detailPanel={[
          {
            tooltip: "Show Activities",
            isFreeAction: true,
            render: rowData => {
              // When clicking on a row, display a list of activities associated
              // With the event
              const event_id = rowData.id;
              return <AdminActivityList event_id={event_id} />;
            },
          },
        ]}
        options={{
          cellStyle: {
            fontSize: "1.6rem",
          },
          headerStyle: {
            fontSize: "4rem",
            backgroundColor: "#2962FF",
            color: "#FFF",
          },
          rowStyle: {
            backgroundColor: "#FFF",
          },
          emptyRowsWhenPaging: false,
          toolbarButtonAlignment: "left",
          searchFieldStyle: {
            width: "20rem",
            fontSize: "1.6rem",
          },
          doubleHorizontalScrolldoubleHorizontalScroll: false,
          columnsButton: true,
        }}
      />
    </Grid>
  );
}