content: import React from 'react';
  import {connect} from 'cerebral-view-react';
  import isValidForm from 'cerebral-module-forms/helpers/isValidForm';
  import {Button, ButtonGroup, Checkbox, Form, Spinner, Text} from './../../../../common/UserInterface';
  
  export default connect({
    isClearingChatHistory: 'store.app.isClearingChatHistory',
    form: 'preferences.chatForm'
  }, class ChatForm extends React.Component {
  
    static displayName = 'ChatForm'
  
    static defaultProps = {
      signals: React.PropTypes.object.isRequired,
      isUpdatingPreferences: React.PropTypes.bool.isRequired,
      form: React.PropTypes.object.isRequired,
      onSubmit: React.PropTypes.func.isRequired
    }
  
    render () {
      const {isClearingChatHistory, form} = this.props;
  
      return (
        <Form>
          <Checkbox id='sendTyping'
                    name='sendTyping'
                    label={{id: 'sendTyping', bundle: 'preferences'}}
                    value='1'
                    checked={!!form.sendTyping.value}
                    onSwitch={this._handleChangeSendTyping}/>
          <Checkbox id='useHistory'
                    name='useHistory'
                    label={{id: 'useHistory', bundle: 'preferences'}}
                    hint={{id: 'useHistoryHint', bundle: 'preferences'}}
                    value='1'
                    checked={!!form.useHistory.value}
                    onSwitch={this._handleChangeUseHistory}/>
          <ButtonGroup>
            <Button title={{id: 'clearChatHistory'}}
                    disabled={isClearingChatHistory}
                    onMouseUp={this._handleClearChatHistory}
                    onKeyboardEnter={this._handleClearChatHistory}
                    onKeyboardPress={this._handleClearChatHistory}>
              {isClearingChatHistory ?
                <Spinner mode='indeterminate'/>
                :
                <Text l10n={{id: 'clearChatHistory'}}/>
              }
            </Button>
          </ButtonGroup>
        </Form>
      );
    }
  
    _handleChangeSendTyping = (event, active) => {
      this.props.signals.forms.fieldChanged({
        field: 'preferences.chatForm.sendTyping',
        value: active
      });
  
      if (isValidForm(this.props.form)) {
        this.props.onSubmit(event, {
          sendTyping: active
        });
      }
    }
  
    _handleChangeUseHistory = (event, active) => {
      this.props.signals.forms.fieldChanged({
        field: 'preferences.chatForm.useHistory',
        value: active
      });
  
      if (isValidForm(this.props.form)) {
        this.props.onSubmit(event, {
          useHistory: active
        });
      }
    }
  
    _handleClearChatHistory = (event) => {
      event.preventDefault();
  
      this.props.signals.preferences.clearChatHistory();
    }
  });
  