import { connect } from "redux-bundler-react";
import upperFirst from "lodash/upperFirst";

const IdentifyBufferSection = (props) => {
  const {
    theme,
    identifySelectBy,
    identifyBufferUnit,
    identifyBufferValue,
    doShowBufferUnits,
    doUpdateIdentifyBuffer,
  } = props;

  return (
    <li className={`${theme}`} id="cm-identify-buffer-section">
      <div className="text-center">
        <div id="cm-identify-buffer-title">
          {`Buffer ${upperFirst(identifySelectBy)} By:`}
        </div>
        <form className="cm-form-inline">
          <input
            className="cm-form-control"
            id="cm-identify-buffer-input"
            type="number"
            value={identifyBufferValue}
            name="identify-buffer"
            title="Identify Buffer Input"
            onChange={doUpdateIdentifyBuffer}
            onKeyPress={(e) => {
              e.key === "Enter" && e.preventDefault();
            }}
          />
          <span id="cm-identify-buffer-units">{`${identifyBufferUnit}`}</span>
          <i
            className="mdi mdi-settings pointer"
            title="Identify Buffer Units"
            onClick={doShowBufferUnits}
          />
        </form>
      </div>
    </li>
  );
};
export default connect(
  "selectTheme",
  "selectIdentifySelectBy",
  "selectIdentifyBufferUnit",
  "selectIdentifyBufferValue",
  "doShowBufferUnits",
  "doUpdateIdentifyBuffer",
  IdentifyBufferSection
);
