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


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

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

  toggleDescription = () => {
    this.setState(function (prevState, props) {
      return { openDescription: !prevState.openDescription };
    });
  };

  render() {
    let popoverId = `popover_${this.props.id}`;

    return (
      <FormGroup check className="checkbox" id={this.props.id}>
        {this.props.title &&
          <Row>
            <Col>
              <Input className="form-check-input" type="checkbox" onChange={this.toggleCheckbox}
                     defaultChecked={this.props.defaultValue}/>
              <Label check className="form-check-label">{this.props.title}</Label>
              {this.props.description &&
                <Label className='ml-1 icon-question link-label' id={popoverId} onClick={this.toggleDescription}>
                  <Popover placement="bottom" isOpen={this.state.openDescription} target={popoverId}
                           toggle={this.toggleDescription}>
                    <PopoverBody>{this.props.description}</PopoverBody>
                  </Popover>
                </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;