import React from "react";
import { Form, FormControl, FormLabel } from "react-bootstrap";
import _ from "lodash";

const DropDownInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>

      <FormControl
        isInvalid={props.errors && errorsArr}
        as={props.as}
        id={props.name}
        name={props.name}
        value={props.value}
        onChange={props.handleChange}
        multiple={props.multiple && "multiple"}
      >
        {!props.multiple && (
          <option value="" disabled>
            Select
          </option>
        )}
        {props.options.map((option) => {
          return (
            <option key={option.id} value={option.name}>
              {option.name}
            </option>
          );
        })}
      </FormControl>

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
};

export default DropDownInput;