import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

class Checkbox extends Component {
  static propTypes = {
    label: PropTypes.node,
    sublabel: PropTypes.node,
    variant: PropTypes.oneOf(['dark', 'light']),
    checkVariant: PropTypes.oneOf(['default', 'white']),
    checkboxColor: PropTypes.string,
    className: PropTypes.string,
  };
  static defaultProps = {
    label: null,
    sublabel: null,
    className: null,
    variant: 'dark',
    checkVariant: 'default',
    checkboxColor: '',
  };

  render() {
    const { label, sublabel, variant, checkVariant, checkboxColor, className, ...rest } = this.props;
    const componentClassName = classnames('Checkbox', className, {
      [`Checkbox--${variant}`]: variant,
    });

    const checkboxElement = classnames('Checkbox-checkboxElement', {
      'Checkbox-checkboxElement--checkWhite': checkVariant === 'white',
    });

    return (
      <label className={componentClassName}>
        <input className={checkboxElement} type="checkbox" {...rest} />
        <span className="Checkbox-label">
          {/* In case checkbox color is passed, we render span in front, pseudo element is not deleted due to backwards compatibility */}
          {checkboxColor && <span className="Checkbox-colored" style={{ backgroundColor: checkboxColor }} />}
          {label && <span className="Checkbox-labelText">{label}</span>}
          {sublabel && <span className="Checkbox-sublabelText">{sublabel}</span>}
        </span>
      </label>
    );
  }
}

export default Checkbox;