import classnames from 'classnames'
import React, { Component, ReactNode } from 'react'
import './style.less'

export interface CheckBoxProps {
  isPad?: boolean
  onChange?: (checked: boolean) => void
  label?: string
  children?: ReactNode
  className?: string
  value: boolean
}

class CheckBox extends Component<CheckBoxProps> {
  public static defaultProps = {
    className: ''
  }

  public onChange = () => {
    const { value, onChange } = this.props
    // tslint:disable-next-line
    onChange && onChange(!value)
  }

  public render() {
    const { isPad, label, children, className, value } = this.props
    const { onChange } = this

    return (
      <div
        className={classnames('ph-checkbox', className, {
          'ph-checkbox-pad': isPad
        })}
        onClick={onChange}
      >
        <div
          className={classnames('ph-checkbox-img', {
            'ph-checkbox-checked': value
          })}
        />
        <div className="ph-checkbox-label">{children ? children : label}</div>
      </div>
    )
  }
}

export default CheckBox