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

import '../base';
import styles from './Label.styl';

export default function Label({ inline, error, warning, info, success, className, children, ...rest }) {
  const set = (value) => typeof value !== 'undefined';
  const classes = classNames({
    [className]: className,
    [styles.inline]: inline,
    // If one of the label style flags is set, disregard the style inherited from a parent FormRow component.
    [styles.noContainerStyle]: set(error) || set(warning) || set(info) || set(success),
    [styles.label]: true,
    [styles.error]: !!error,
    [styles.warning]: !!warning,
    [styles.info]: !!info,
    [styles.success]: !!success
  });

  return (
    // eslint-disable-next-line jsx-a11y/label-has-associated-control
    <label
      className={classes}
      {...rest}
    >
      {children}
      {
        error && <span className={styles.error}>{error}</span>
      }
    </label>
  );
}

Label.propTypes = {
  error: PropTypes.string,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool
};

Label.defaultProps = {
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined
};