/* eslint-disable react/prop-types */
import classNames from 'classnames';

function FormInput({field, form, inline, ...props}) {
  const id = props.id || field.name;
  const label = props.label || field.name;
  const placeholder = props.placeholder || label;
  const type = props.type || 'input';
  const exactLabel = ['.', '?', '!', '؟'].includes(label.charAt(label.length - 1)) ?
    label.substring(0, label.length - 1) :
    label;
  const error = form.errors[field.name];
  const touched = form.touched[field.name];

  return (
    <div className={classNames(
      {'inline ': inline},
      props.className
    )}
    >
      <label
        htmlFor={id}
        className={classNames(
          inline ? 'block sm:inline sm:ml-4 my-2' : 'block mb-3',
          'text-sm font-medium text-gray-700'
        )}
      >
        {`${exactLabel} :`}
      </label>
      <input
        {...props}
        {...field}
        id={id}
        type={type}
        placeholder={placeholder}
        className={classNames(
          'px-4 py-2 rounded-md border border-gray-300 shadow-sm sm:text-sm',
          'focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none',
          inline ? 'block sm:inline sm:ml-4 my-2' : 'block w-full'
        )}
      />
      {error && touched && <div className='mt-1 px-2 text-red-400 text-sm'>{error}</div>}
    </div>
  );
}

export default FormInput;
