import bridge from '../common/bridge';
import React from 'react';

export default class ServerForm extends React.Component {
  render() {
    return (
      <form onSubmit={this.connect.bind(this)}>
        <p>server: <input type='text' name='server' defaultValue='irc.freenode.net' /></p>
        <p>port: <input type='text' name='port' defaultValue='6667' /></p>
        <p>encoding: <input type='text' name='encoding' defaultValue='UTF-8' /></p>
        <p>nickname: <input type='text' name='nick' defaultValue='noraesae' /></p>
        <p>user name: <input type='text' name='username' defaultValue='noraesae' /></p>
        <p>real name: <input type='text' name='realname' defaultValue='noraesae' /></p>
        <p><button>connect</button></p>
      </form>
    );
  }

  formToJSON() {
    let form = React.findDOMNode(this);
    let inputs = form.querySelectorAll('input[type="text"]');
    return Array.prototype.reduce.call(inputs, function (obj, input) {
      obj[input.name] = input.value;
      return obj;
    }, {});
  }

  connect(e) {
    e.preventDefault();

    let data = this.formToJSON();
    this.props.connect(data);
    bridge.send('connect', data);
  }
}

@@ -60,16 +60,290 @@
 eact';%0A%0A
+class TextInput extends React.Component %7B%0A  render() %7B%0A    return %3Cinput type='text' name=%7Bthis.props.name%7D%0A                  defaultValue=%7Bthis.props.defaultValue%7D%0A                  onKeyDown=%7Bthis.keydown.bind(this)%7D /%3E;%0A  %7D%0A  keydown(e) %7B%0A    e.stopPropagation();%0A  %7D%0A%7D%0A%0A
 export d
@@ -486,33 +486,25 @@
 erver: %3C
-input type='text'
+TextInput
  name='s
@@ -567,33 +567,25 @@
 %3Eport: %3C
-input type='text'
+TextInput
  name='p
@@ -638,33 +638,25 @@
 oding: %3C
-input type='text'
+TextInput
  name='e
@@ -714,33 +714,25 @@
 kname: %3C
-input type='text'
+TextInput
  name='n
@@ -790,33 +790,25 @@
  name: %3C
-input type='text'
+TextInput
  name='u
@@ -870,33 +870,25 @@
  name: %3C
-input type='text'
+TextInput
  name='r

Stop propagation from server form inputs.