text: import ProductField from '../../productfield'
  import Form from '@admin/components/form'
  import PropTypes from 'prop-types'
  import React from 'react'
  
  class OptionsFieldForm extends React.Component {
  
    static propTypes = {
      config: PropTypes.object,
      onDone: PropTypes.func,
      onUpdate: PropTypes.func
    }
  
    form = null
  
    state = {
      config: null
    }
  
    _handleChange = this._handleChange.bind(this)
    _handleDone = this._handleDone.bind(this)
    _handleSubmit = this._handleSubmit.bind(this)
  
    render() {
      if(!this.state.config) return null
      return <Form { ...this._getForm() } />
    }
  
    componentDidMount() {
      this.setState({
        config: {
          ...this._getDefault(),
          ...this.props.config
        }
      })
    }
  
    componentDidUpdate(prevProps, prevState) {
      const { config } = this.state
      if(!_.isEqual(config, prevState.config)) {
        this.props.onUpdate(config)
      }
    }
  
    _getForm() {
      const { config } = this.state
      return {
        title: 't(Options)',
        reference: node => this.form = node,
        onChange: this._handleChange,
        onSubmit: this._handleDone,
        cancelText: null,
        saveText: null,
        buttons: [
          { label: 'Done', color: 'red', handler: this._handleSubmit }
        ],
        sections: [
          {
            fields: [
              { label: 't(Name)', name: 'name', type: 'tokenfield', placeholder: 'Enter a name', required: true, defaultValue: config.name },
              { label: 't(Label)', name: 'label', type: 'textfield', placeholder: 'Enter a label', defaultValue: config.label },
              { label: 't(Instructions)', name: 'instructions', type: 'htmlfield', placeholder: 'Enter instructions', defaultValue: config.instructions },
              { label: 't(Required)', name: 'required', type: 'checkbox', prompt: 'This field is required', defaultValue: config.required },
              { label: 't(Options)', name: 'options', type: ProductField, entity: 'option', allowedPricing: ['free','fixed','custom'], defaultValue: config.options }
            ]
          }
        ]
      }
    }
  
    _getDefault() {
      return {
        label: '',
        token: '',
        instructions: '',
        required: false,
        products: []
      }
    }
  
    _handleChange(config) {
      this.setState({
        config: {
          ...this.state.config,
          ...config
        }
      })
    }
  
    _handleDone() {
      this.props.onDone()
    }
  
    _handleSubmit() {
      this.form.submit()
    }
  
  }
  
  export default OptionsFieldForm
  