import React from 'react';
import PropTypes from 'prop-types';

// Style
/* istanbul ignore next */
if (typeof window !== 'undefined') require('./style.scss');

/**
 * A simple toggle.
 */
const Toggle = props => {
  const { children, className, label, type } = props;
  const ToggleClasses = [`Toggle`, `Toggle_${type}`, className].filter(e => e).join(' ');

  return (
    <label className={ToggleClasses}>
      <input
        {...{ ...props, children: null, style: null }}
        className="Toggle-input"
        type={props.type === 'toggle' ? 'checkbox' : props.type}
      />
      <div className="Toggle-display">
        <i className="fa fa-check"></i>
      </div>
      {(label || children) && (
        <span className="Toggle-label" title={label}>
          {label || children}
        </span>
      )}
    </label>
  );
};

Toggle.propTypes = {
  className: PropTypes.string,
  label: PropTypes.string,
  type: PropTypes.oneOf(['checkbox', 'radio', 'toggle']),
  value: PropTypes.any,
};

Toggle.defaultProps = {
  type: 'checkbox',
};

export default Toggle;
