import React from "react";
import { connect } from "redux-bundler-react";

const CoordinateLatLonInput = (props) => {
  const { label, placeholder, doUpdateCoordInput, coordsLatLonInput } = props;

  return (
    <li>
      <span className="cm-form-horizontal">
        <div className="cm-form-group" style={{ marginBottom: 0 }}>
          <label className="col-md-1" style={{ paddingTop: "3px" }}>
            {label}
          </label>
          <div className="col-md-10">
            <input
              type="text"
              className="cm-form-control cm-input-sm"
              onChange={(e) => {
                doUpdateCoordInput(e, label);
              }}
              value={coordsLatLonInput[`${label}`]}
              placeholder={placeholder}
            />
          </div>
        </div>
      </span>
    </li>
  );
};

export default connect(
  "doUpdateCoordInput",
  "selectCoordsLatLonInput",
  CoordinateLatLonInput
);
