import React from 'react';
import Checkbox from 'coral-ui/components/Checkbox';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './StreamConfiguration.css';
import uuid from 'uuid/v4';

class Configuration extends React.Component {
  id = uuid();

  render() {
    const {
      title,
      description,
      children,
      className,
      onCheckbox,
      checked,
      ...rest
    } = this.props;
    return (
      <div {...rest} className={cn(styles.root, className)}>
        {checked !== undefined && (
          <div className={styles.action}>
            <Checkbox
              id={this.id}
              className={styles.checkbox}
              onChange={onCheckbox}
              checked={checked}
            />
          </div>
        )}
        <div
          className={cn(styles.wrapper, {
            [styles.content]: checked !== undefined,
          })}
        >
          <label htmlFor={this.id} className={styles.title}>
            {title}
          </label>
          <div className={styles.description}>{description}</div>
          <div>{children}</div>
        </div>
      </div>
    );
  }
}

Configuration.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
  className: PropTypes.string,
  onCheckbox: PropTypes.func,
  checked: PropTypes.bool,
  children: PropTypes.node,
};

export default Configuration;