import PropTypes from "prop-types";
import React from "react";

class UnitAddComponent extends React.Component {
  static propTypes = {
    units: PropTypes.array.isRequired,
    onAdd: PropTypes.func.isRequired
  };

  render() {
    return (
      <div className="form-inline">
        <div className="form-group w-100">
          <select
            className="form-control w-75 mr-1"
            ref={unitSelect => (this.unitSelect = unitSelect)}
          >
            {this.props.units.map(unit => (
              <option value={unit.id} key={unit.id}>
                {unit.manufacturer +
                  " " +
                  unit.family +
                  " " +
                  unit.model +
                  " " +
                  unit.generation}
              </option>
            ))}
          </select>
          <button
            type="submit"
            className="btn btn-primary"
            onClick={() =>
              this.props.onAdd(parseInt(this.unitSelect.value, 10))}
          >
            <span className="fa fa-plus mr-2" />
            Add
          </button>
        </div>
      </div>
    );
  }
}

export default UnitAddComponent;