/**
*
* NewHintForm
*
*/


import React, { PropTypes } from 'react';
import { Form, Text } from 'react-form';
// import styled from 'styled-components';

import { FormattedMessage } from 'react-intl';
import messages from './messages';

class NewHintForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    const myForm = (
      <Form
        onSubmit={(values) => {
          this.props.onSubmitCoordinates();
        }}
        onChange={(values) => {
          if (values.values.rdx && values.values.rdx.length === 5 && values.values.rdy && values.values.rdy.length === 5) {
            this.props.onCoordinateChange(values.values);
          }
        }}
        validate={({ rdx, rdy }) =>
          ({
            rdx: (!rdx || rdx.length !== 5 || isNaN(parseInt(rdx))) ? 'Dit getal moet 5 tekens lang zijn' : null,
            rdy: (!rdy || rdy.length !== 5 || isNaN(parseInt(rdy))) ? 'Dit getal moet 5 tekens lang zijn' : null,
          })
        }
      >
        {({ submitForm }) =>
          (
            <form onSubmit={submitForm}>
              <div className="form-group">
                <span htmlFor="rdx">Rijksdriehoek X</span>
                <Text className="form-control" field="rdx" placeholder="46828" />
              </div>
              <div className="form-group">
                <span htmlFor="rdy">Rijksdriehoek Y</span>
                <Text className="form-control" field="rdy" placeholder="21146" />
              </div>
              <button type="submit" className="btn btn-default">Versturen</button>
            </form>
          )
        }
      </Form>
    );
    return (
      <div>
        {myForm}
      </div>
    );
  }
}

NewHintForm.propTypes = {
  onCoordinateChange: PropTypes.func.isRequired,
  onSubmitCoordinates: PropTypes.func.isRequired,
};

export default NewHintForm;

@@ -1165,17 +1165,17 @@
 lFor=%22rd
-x
+y
 %22%3ERijksd
@@ -1247,17 +1247,17 @@
 ield=%22rd
-x
+y
 %22 placeh
@@ -1267,13 +1267,13 @@
 er=%22
-46828
+21146
 %22 /%3E
@@ -1362,33 +1362,33 @@
 span htmlFor=%22rd
-y
+x
 %22%3ERijksdriehoek 
@@ -1444,33 +1444,33 @@
 ntrol%22 field=%22rd
-y
+x
 %22 placeholder=%222
@@ -1460,37 +1460,37 @@
 x%22 placeholder=%22
-21146
+46828
 %22 /%3E%0A           

Swap RDX and RDY