import * as _ from "lodash";
import * as React from "react";

export interface IInputProps {
  type: string;
  id: string;
  value?: string;
  placeholder?: string;
  required?: boolean;
  style?: object;
  subtext?: string;
  supertext?: string;
  onClick?: () => void;
  onChange?: (id: string, data: string | number) => void;
  innerRef?: React.RefObject<HTMLInputElement>
}

export const Input = ({ type, id, value, placeholder, required, subtext, supertext, onClick, onChange, style, innerRef}: IInputProps) => (
  <div className="input__container" id={id}>
    <input
      type={type}
      autoComplete={type}
      {...required && { required }}
      {...placeholder && { placeholder }}
      {...onClick && { onClick }}
      {...value && { value }}
      {...style && { style }}
      {...innerRef && { ref: innerRef }}
      onChange={(e) => {
        // @ts-ignore
        onChange && onChange(id, e.target.value);
      }}
    />
    {!_.isEmpty(supertext) && <span className="input__supertext">{supertext}</span>}
    {!_.isEmpty(subtext) && <span className="input__subtext">{subtext}</span>}
  </div>
)