import React, { Component } from 'react';
import { Col, Row, FormGroup, Input, Label } from 'reactstrap';
import PropTypes from 'prop-types';
import PopoverHelper from './PopoverHelper';


class HiddenBodyCheckbox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openBody: this.props.defaultValue
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.defaultValue !== this.props.defaultValue)
      this.setState({ openBody: nextProps.defaultValue });
  }

  toggleCheckbox = (e) => {
    if (this.props.onChange)
      this.props.onChange(this.props.id, e.target.checked);
    this.setState({ openBody: e.target.checked });
  };

  render() {
    return (
      <FormGroup check className="checkbox" id={this.props.id}>
        {this.props.title &&
          <Row>
            <Col>
              <Input className="form-check-input" type="checkbox" onChange={this.toggleCheckbox} checked={this.state.openBody}/>
              <Label check className="form-check-label">
                {this.props.title} <PopoverHelper description={this.props.description} />
              </Label>
            </Col>
          </Row>
        }
        {this.state.openBody &&
          <Row>
            {this.props.children}
          </Row>
        }
      </FormGroup>
    );
  }
}

HiddenBodyCheckbox.propTypes = {
  id: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  title: PropTypes.string,
  description: PropTypes.string,
  defaultValue: PropTypes.bool,
  onChange: PropTypes.func
};

HiddenBodyCheckbox.defaultProps = {
  id: null,
  description: null,
  defaultValue: false,
  onChange: null
};

export default HiddenBodyCheckbox;