import React from 'react';

export interface IFormControl extends React.HTMLProps<any> {
  as?: 'input' | 'select' | 'textarea';
  className?: string;
  defaultValue?: string;
  disabled?: boolean;
  feedback?: string;
  id?: string;
  label?: string;
  min?: any;
  minLength?: any;
  max?: any;
  maxLength?: any;
  name?: string;
  pattern?: string;
  placeholder?: string;
  readOnly?: boolean;
  required?: boolean;
  rows?: any;
  size?: 'sm' | 'lg' | any;
  style?: React.CSSProperties;
  type?: string;
  value?: string;
  onBlur?(e: any): void;
  onChange?(e: any): void;
  onInput?(e: any): void;
  onFocus?(e: any): void;
  onKeyUp?(e: any): void;
  onKeyDown?(e: any): void;
  onKeyPress?(e: any): void;
  [x: string]: any;
}

export type RefFormControls = HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement;

export const FormControl = React.forwardRef<RefFormControls, IFormControl>((props, ref) => {
  const {
    as = 'input',
    className = '',
    disabled = false,
    defaultValue,
    feedback,
    id,
    label,
    min,
    max,
    minLength,
    maxLength,
    name,
    pattern,
    placeholder,
    required,
    readOnly = false,
    rows,
    size,
    style,
    type,
    value,
    onBlur,
    onChange,
    onFocus,
    onInput,
    onKeyUp,
    onKeyDown,
    onKeyPress,
    ...otherProps
  } = props;

  function addClassNames() {
    let classList = 'b-form-control';
    if (size) {
      classList = `${classList} b-form-control-${size}`;
    }
    if (className.length) {
      classList = `${classList} ${className}`;
    }
    return classList;
  }

  function addInputType(propInputType: string) {
    if (propInputType) {
      return propInputType;
    } else {
      return 'text';
    }
  }

  let control = null;

  switch (as) {
    case 'select':
      control = (
        <select
          ref={ref}
          className={addClassNames()}
          id={id}
          defaultValue={defaultValue}
          disabled={disabled}
          name={name}
          required={required}
          style={style}
          value={value}
          onInvalid={(e) => e.preventDefault()}
          onChange={onChange}
          onBlur={onBlur}
          onFocus={onFocus}
          onInput={onInput}
          onKeyUp={onKeyUp}
          onKeyDown={onKeyDown}
          onKeyPress={onKeyPress}
          {...otherProps}>
          {props.children}
        </select>
      );
      break;
    case 'textarea':
      control = (
        <textarea
          ref={ref}
          className={addClassNames()}
          id={id}
          disabled={disabled}
          defaultValue={defaultValue}
          minLength={minLength}
          maxLength={maxLength}
          name={name}
          placeholder={placeholder}
          readOnly={readOnly}
          required={required}
          rows={rows}
          style={style}
          value={value}
          onInvalid={(e) => e.preventDefault()}
          onChange={onChange}
          onBlur={onBlur}
          onFocus={onFocus}
          onInput={onInput}
          onKeyUp={onKeyUp}
          onKeyDown={onKeyDown}
          onKeyPress={onKeyPress}
          {...otherProps}
        />
      );
      break;
    default:
      control = (
        <input
          ref={ref}
          className={addClassNames()}
          id={id}
          defaultValue={defaultValue}
          disabled={disabled}
          min={min}
          minLength={minLength}
          max={max}
          maxLength={maxLength}
          name={name}
          pattern={pattern}
          placeholder={placeholder}
          readOnly={readOnly}
          required={required}
          style={style}
          type={addInputType(type)}
          value={value}
          onInvalid={(e) => e.preventDefault()}
          onChange={onChange}
          onBlur={onBlur}
          onFocus={onFocus}
          onInput={onInput}
          onKeyUp={onKeyUp}
          onKeyDown={onKeyDown}
          onKeyPress={onKeyPress}
          {...otherProps}
        />
      );
  }
  if (label) {
    return (
      <label className="b-form-label-outer">
        <div className={`b-form-label ${required ? 'is-required' : ''}`}>{label}</div>
        {control}
        {(required || pattern) && <div className="b-invalid-feedback">{feedback ? feedback : 'Please provide a valid entry'}</div>}
      </label>
    );
  } else {
    return (
      <React.Fragment>
        {control}
        {(required || pattern) && <div className="b-invalid-feedback">{feedback ? feedback : 'Please provide a valid entry'}</div>}
      </React.Fragment>
    );
  }
});