import React from 'react';
import { buildClassName } from '../../shared/utils/class-util';
import { compact } from 'lodash';

interface LabeledInputProps {
  name: string;
  type?: string;
  required?: boolean;
  value?: string | number;
  defaultValue?: string | number;
  min?: string | number;
  max?: string | number;
  label?: string;
  placeholder?: string;
  hasError?: boolean;
  extraClassName?: string;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
}

const LabeledInput: React.FC<LabeledInputProps> = ({
  name,
  type,
  required,
  value,
  defaultValue,
  min,
  max,
  label,
  placeholder,
  extraClassName,
  hasError,
  onChange,
  onBlur
}) => {
  return (
    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
      <input
        name={name}
        type={type ?? 'text'}
        required={required}
        className="form__input"
        min={min}
        max={max}
        placeholder={placeholder}
        onChange={onChange}
        onBlur={onBlur}
        value={value}
        defaultValue={defaultValue}
      />
    </label>
  );
};

export default LabeledInput;