/**
*
* IKCheckBox
*
*/

import React, { PureComponent } from 'react';

class IKCheckBox extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    label: React.PropTypes.string.isRequired,
    label_value: React.PropTypes.string.isRequired,
    checked: React.PropTypes.boolean,
    index: React.PropTypes.number,
    onClick: React.PropTypes.func,
  };

  state = {
    checked: false;
  };

  constructor(props) {
    super(props);
  }

  handleClick(e) {
    this.setState({ checked: !this.state.checked }, () => {
      this.props.onClick(this.props.index, this.state.checked);
    });
  }

  render() {
    const props = $({}, this.props);

    let className ='ikmd-check-box fa ';
    if (this.state.checked) {
      className += 'fa-check-square';
    } else {
      className += 'fa-square-o';
    }

    return (
      <div className="ikmd-check-box-container">
        <IKInputType label={props.label} vaule={props.label_value} />
        <i className={className} onClick={this.handleClick}
      </div>
    );
  }
}

export default IKCheckBox;
