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

class Toggle extends Component {
  static propTypes = {
    label: PropTypes.node,
    sublabel: PropTypes.node,
    variant: PropTypes.oneOf(['dark', 'light']),
    className: PropTypes.string,
    disabled: PropTypes.bool,
  };

  static defaultProps = {
    label: null,
    sublabel: null,
    className: null,
    variant: 'dark',
    disabled: false,
  };

  render() {
    const { label, sublabel, variant, disabled, className, ...rest } = this.props;

    const componentClassName = classnames('Toggle', className, {
      [`Toggle--${variant}`]: variant,
      'Toggle--disabled': disabled,
    });

    return (
      <label className={componentClassName}>
        <input tabIndex={0} type="checkbox" className="Toggle-input" {...disabled && { disabled: true }} {...rest} />
        <span className="Toggle-slider" />
        {label && (
          <span className="Toggle-label">
            <span className="Toggle-label--text">{label}</span>
            {sublabel && <span className="Toggle-label--subtext">{sublabel}</span>}
          </span>
        )}
      </label>
    );
  }
}

export default Toggle;