import React from 'react';
import Checkbox from 'material-ui/Checkbox';
import { CheckBoxWrapper } from './StyledWrapper';
import shortid from 'shortid';

class CheckBox extends React.Component {
  static get propTypes() {
    return {
      label: React.PropTypes.string,
      disabled: React.PropTypes.bool,
      onChange: React.PropTypes.func,
      fontSize: React.PropTypes.number
    }
  }
  constructor(props) {
    super(props);
    this.state = {
      checked: props.checked,
      id: shortid.generate()
    }
    this.onClick = this.onClick.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.checked !== nextProps.checked) {
      this.setState({ checked: nextProps.checked });
    }
  }

  onClick = () => {
    let checked = !this.state.checked;
    this.setState({ checked }, () => {
      if (this.props.onChange) {
        this.props.onChange(this.state.checked);
      }
    })
  }

  render() {
    return (
      <CheckBoxWrapper className={this.props.className}>
        <Checkbox
          className='chkbx'
          key={this.state.id}
          label={this.props.label}
          checked={this.state.checked}
          disabled={this.props.disabled}
          onClick={this.onClick}
          labelStyle={
            {
              color: 'rgba(0,0,0,0.7)',
              fontSize: this.props.fontSize || '14',
              display: 'block',
              lineHeight: '24px',
              color: 'rgba(0, 0, 0, 0.7)',
              position: 'absolute',
              left: '25px',
              minWidth: '70px',
              top: '0',
              bottom: '0',
              margin: 'auto'
            }
          }
        />
      </CheckBoxWrapper>
    )
  }
}

export default CheckBox;