import React from 'react';

export interface IFormCheck extends React.HTMLProps<HTMLInputElement> {
  className?: string;
  checked?: boolean;
  defaultChecked?: boolean;
  disabled?: boolean;
  id?: string;
  inline?: boolean;
  label?: string;
  name?: string;
  required?: boolean;
  style?: React.CSSProperties;
  type?: 'checkbox' | 'radio' | 'switch';
  value?: string;
  onBlur?(e: any): void;
  onChange?(e: any): void;
  onFocus?(e: any): void;
  [x: string]: any;
}

export const FormCheck = React.forwardRef<HTMLInputElement, IFormCheck>((props, ref) => {
  const { className = '', disabled = false, checked, defaultChecked, id, inline, label = '', name, required, style, type = 'checkbox', value = '', onBlur, onChange, onFocus, ...otherProps } = props;

  function addClassNames() {
    let classList = `b-form-check b-form-${type}`;
    if (inline) {
      classList += ` b-form-check-inline`;
    }
    if (required) {
      classList += ` is-required`;
    }
    if (className.length) {
      classList += ` ${className}`;
    }
    return classList;
  }

  function getType(type: string) {
    if (type === 'switch') {
      return 'checkbox';
    } else {
      return type;
    }
  }

  return (
    <label className={addClassNames()}>
      <input
        ref={ref}
        className="b-form-check-input"
        id={id}
        checked={checked}
        defaultChecked={defaultChecked}
        disabled={disabled}
        name={name}
        required={required}
        value={value}
        style={style}
        type={getType(type)}
        onChange={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        {...otherProps}
      />
      <span className="b-form-check-label">{label}</span>
    </label>
  );
});