text: import { RadioGroup } from '../../form/select'
  import ModalPanel from '../../modal_panel'
  import PropTypes from 'prop-types'
  import React from 'react'
  
  class File extends React.Component {
  
    static propTypes = {
      defaultValue: PropTypes.object,
      code: PropTypes.string,
      comparisons: PropTypes.array,
      field: PropTypes.object,
      name: PropTypes.object,
      onCancel: PropTypes.func,
      onChange: PropTypes.func,
      onDone: PropTypes.func
    }
  
    state = {
      operator: null
    }
  
    _handleCancel = this._handleCancel.bind(this)
    _handleChange = this._handleChange.bind(this)
    _handleDone = this._handleDone.bind(this)
  
    render() {
      return (
        <ModalPanel { ...this._getPanel() }>
          <div className="maha-criterion-form">
            <div className="maha-criterion-form-header">
              <RadioGroup { ...this._getRadioGroup() } />
            </div>
            <div className="maha-criterion-form-body" />
          </div>
        </ModalPanel>
      )
    }
  
    componentDidMount() {
      const { defaultValue } = this.props
      if(defaultValue) this._handleSet(defaultValue)
    }
  
    componentDidUpdate(prevProps, prevState) {
      const { operator } = this.state
      if(operator !== prevState.operator) {
        this._handleChange()
      }
    }
  
    _getOperators() {
      const { comparisons } = this.props
      return comparisons || [
        { value: '$kn', text: 'is known' },
        { value: '$nkn', text: 'is unknown' }
      ]
    }
  
    _getPanel() {
      const { name } = this.props
      return {
        title: name,
        color: 'grey',
        leftItems: [
          { icon: 'chevron-left', handler: this._handleCancel }
        ],
        buttons: [{
          label: 'Add Criteria',
          color: 'blue',
          handler: this._handleDone
        }]
      }
    }
  
    _getRadioGroup() {
      const options = this._getOperators()
      const { operator } = this.state
      return {
        defaultValue: operator || options[0].value,
        deselectable: false,
        options,
        onChange: this._handleUpdate.bind(this, 'operator')
      }
    }
  
    _handleCancel() {
      this.props.onCancel()
    }
  
    _handleChange() {
      const { operator } = this.state
      const { code } = this.props
      this.props.onChange({
        code,
        operator,
        value: '',
        data: null
      })
    }
  
    _handleDone() {
      const { operator } = this.state
      const { code } = this.props
      this.props.onDone({
        code,
        operator,
        value: '',
        data: null
      })
    }
  
    _handleSet(defaultValue) {
      const operator = Object.keys(defaultValue)[0]
      const value = defaultValue[operator]
      this.setState({ operator, value })
    }
  
    _handleUpdate(key, value) {
      this.setState({
        [key]: value
      })
    }
  
  }
  
  export default File
  