import React, {PropTypes} from 'react'

import RedactedInput from './RedactedInput'

const {bool, func, shape, string} = PropTypes

const AlertaConfig = React.createClass({
  propTypes: {
    config: shape({
      options: shape({
        environment: string,
        origin: string,
        token: bool,
        url: string,
      }).isRequired,
    }).isRequired,
    onSave: func.isRequired,
  },

  handleSaveAlert(e) {
    e.preventDefault()

    const properties = {
      environment: this.environment.value,
      origin: this.origin.value,
      token: this.token.value,
      url: this.url.value,
    }

    this.props.onSave(properties)
  },

  render() {
    const {environment, origin, token, url} = this.props.config.options

    return (
      <form onSubmit={this.handleSaveAlert}>
        <div className="form-group col-xs-12">
          <label htmlFor="environment">Environment</label>
          <input
            className="form-control"
            id="environment"
            type="text"
            ref={r => (this.environment = r)}
            defaultValue={environment || ''}
          />
        </div>

        <div className="form-group col-xs-12">
          <label htmlFor="origin">Origin</label>
          <input
            className="form-control"
            id="origin"
            type="text"
            ref={r => (this.origin = r)}
            defaultValue={origin || ''}
          />
        </div>

        <div className="form-group col-xs-12">
          <label htmlFor="token">Token</label>
          <RedactedInput
            defaultValue={token}
            id="token"
            refFunc={r => (this.token = r)}
          />
        </div>

        <div className="form-group col-xs-12">
          <label htmlFor="url">User</label>
          <input
            className="form-control"
            id="url"
            type="text"
            ref={r => (this.url = r)}
            defaultValue={url || ''}
          />
        </div>

        <div className="form-group-submit col-xs-12 text-center">
          <button className="btn btn-primary" type="submit">
            Update Alerta Config
          </button>
        </div>
      </form>
    )
  },
})

export default AlertaConfig

@@ -17,16 +17,27 @@
 ropTypes
+, Component
 %7D from '
@@ -94,321 +94,89 @@
 '%0A%0Ac
-onst %7Bbool, func, shape, string%7D = PropTypes%0A%0Aconst AlertaConfig = React.createClass(%7B%0A  propTypes: %7B%0A    config: shape(%7B%0A      options: shape(%7B%0A        environment: string,%0A        origin: string,%0A        token: bool,%0A        url: string,%0A      %7D).isRequired,%0A    %7D).isRequired,%0A    onSave: func.isRequired,
+lass AlertaConfig extends Component %7B%0A  constructor(props) %7B%0A    super(props)
 %0A  %7D
-,
 %0A%0A  
@@ -194,11 +194,15 @@
 lert
-(e)
+ = e =%3E
  %7B%0A 
@@ -427,17 +427,58 @@
 ies)%0A  %7D
-,
+%0A%0A  handleTokenRef = r =%3E (this.token = r)
 %0A%0A  rend
@@ -1452,37 +1452,35 @@
 efFunc=%7B
-r =%3E (this.token = r)
+this.handleTokenRef
 %7D%0A      
@@ -2018,12 +2018,276 @@
 %0A  %7D
+%0A%7D%0A%0Aconst %7Bbool, func, shape, string%7D = PropTypes%0A%0AAlertaConfig.propTypes = %7B%0A  config: shape(%7B%0A    options: shape(%7B%0A      environment: string,%0A      origin: string,%0A      token: bool,%0A      url: string,%0A    %7D).isRequired,%0A  %7D).isRequired,%0A  onSave: func.isRequired
 ,%0A%7D
-)
 %0A%0Aex

Refactor AlertaConfig.