Components/SearchField/SearchField.jsx

import React from "react";
import PropTypes from "prop-types";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

import Adjust from "@material-ui/icons/Adjust";
import Room from "@material-ui/icons/Room";
import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline";
import RadioButtonCheckedIcon from "@material-ui/icons/RadioButtonChecked";

/**
 * The component that displays the search field(s)
 * @category RoutingMenu
 */
function SearchField(props) {
  const { index, addNewSearchFieldHandler, currentStops ,
    removeSearchFieldHandler, searchStopsHandler, singleStop, processHighlightedResultSelectHandler,
    onFieldFocusHandler
  } = props;
  let fieldLeftIcon = null;
  let searchFieldSize = 10;
  let searchFieldLabel = "";
  let fieldRightIcon = null;
  if (index === 0) {
    // Start station field
    fieldLeftIcon = (
      <RadioButtonCheckedIcon fontSize="small" color="primary" />
    );
    searchFieldLabel = "Start";
    fieldRightIcon = (
      <Grid item xs={1}>
        <Tooltip title="Add Hop">
          <IconButton
            onClick={() => addNewSearchFieldHandler(index + 1)}
            color="primary"
            aria-label="Add Hop"
            size="small"
          >
            <AddCircleOutlineIcon fontSize="small"/>
          </IconButton>
        </Tooltip>
      </Grid>
    );
  } else if (index === currentStops.length - 1) {
    fieldLeftIcon = <Room color="primary" />;
    searchFieldLabel = "End";
  } else {
    fieldLeftIcon = <Adjust fontSize="small" color="primary" />;
    searchFieldSize = 9;
    searchFieldLabel = "Hop";
    fieldRightIcon = (
      <>
        <Grid item xs={1}>
          <Tooltip title="Remove Hop">
            <IconButton
              onClick={() => removeSearchFieldHandler(index)}
              color="secondary"
              aria-label="removeHop"
              size="small"
            >
              <RemoveCircleOutlineIcon fontSize="small" />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item xs={1}>
          <Tooltip title="Add Hop">
            <IconButton
              onClick={() => addNewSearchFieldHandler(index + 1)}
              color="primary"
              aria-label="addHop"
              size="small"
            >
              <AddCircleOutlineIcon fontSize="small" />
            </IconButton>
          </Tooltip>
        </Grid>
      </>
    );
  }
  return (
    <Grid
      container
      spacing={1}
      alignItems="flex-end"
      style={{ width: "100%" }}
    >
      <Grid item xs={1}>
        {fieldLeftIcon}
      </Grid>
      <Grid item xs={searchFieldSize}>
        <TextField
          style={{ width: "100%" }}
          label={searchFieldLabel}
          color="primary"
          onChange={e => searchStopsHandler(e, index)}
          value={singleStop}
          onKeyDown={processHighlightedResultSelectHandler}
          onFocus={() => onFieldFocusHandler(index)}
        />
      </Grid>
      {fieldRightIcon}
    </Grid>
  );
}

SearchField.propTypes = {
  index: PropTypes.number.isRequired,
  addNewSearchFieldHandler: PropTypes.func.isRequired,
  currentStops: PropTypes.arrayOf(PropTypes.string),
  removeSearchFieldHandler: PropTypes.func.isRequired,
  searchStopsHandler: PropTypes.func.isRequired,
  singleStop: PropTypes.string,
  processHighlightedResultSelectHandler: PropTypes.func.isRequired,
  onFieldFocusHandler: PropTypes.func.isRequired,
};

SearchField.defaultProps = {
  currentStops: [],
  singleStop: ""
};

export default SearchField;