import React from 'react';
import { InputTypeEnum } from './types';
import { FormType } from '../Form/component';
import cx from 'classnames';
export var Input = function Input(props) {
  var placeholder = props.placeholder,
      label = props.label,
      id = props.id,
      datalist = props.datalist,
      value = props.value,
      _props$type = props.type,
      type = _props$type === void 0 ? InputTypeEnum.TEXT : _props$type,
      handleChange = props.onChange,
      message = props.message,
      valid = props.valid,
      formType = props.formType;
  var wrapperClasses = cx({
    'form-group': FormType.NORMAL === formType,
    'form-control': FormType.ONPLACE === formType
  });
  var inputClasses = cx({
    'form-control': FormType.NORMAL === formType || FormType.INLINE === formType,
    'border-0 w-100': FormType.ONPLACE === formType
  });
  return React.createElement("div", {
    className: wrapperClasses
  }, label ? React.createElement("label", {
    htmlFor: id,
    className: "mr-3"
  }, label) : null, React.createElement("input", {
    type: type,
    className: inputClasses,
    id: id,
    placeholder: placeholder,
    value: value,
    onChange: handleChange,
    name: id
  }), datalist && datalist.length > 0 ? React.createElement("datalist", null, datalist.map(function (option, i) {
    return React.createElement("option", {
      key: i,
      value: option
    });
  })) : null, !valid ? React.createElement("small", {
    className: "form-text invalid-feedback d-block"
  }, message) : null, valid ? React.createElement("small", {
    className: "form-text valid-feedback d-block"
  }, message) : null);
};