var React    = require('react');
    var Form     = require('react-json-editor');

    var schema = {
      title      : "My pretty form",
      description: "Declarative pure data DSLs are the best.",
      type       : "object",
      properties : {
        comment: {
          title      : "Your comment",
          description: "Type something here.",
          type       : "string",
          minLength  : 1
        }
      }
    };

    var onSubmit = function(data, buttonValue, errors) {
      alert('Data  : '+JSON.stringify(data)+'\n'+
            'Button: '+buttonValue+'\n'+
            'Errors: '+JSON.stringify(errors));
    };

    ReactDOM.render(<Form
                   schema   = {schema}
                   onSubmit = {onSubmit} />,
                 document.body);

    var schema = {
      type      : "object",
      properties: {
        comment: { title: "Comment" },
        email  : { title: "Email" },
        name   : { title: "Name" }
      },
      "x-ordering": ["name", "email", "comment"]
    };

    var schema = {
      type      : "object",
      properties: {
        name : {
          title: "Name",
          "x-hints": {
            form: {
              classes: [ "form-text-field", "form-name-field" ]
            }
          }
        },
        email: {
          title: "Email",
          "x-hints": {
            form: {
              classes: [ "form-text-field", "form-email-field" ]
            }
          }
        }
      },
      "x-hints": {
        form: {
          classes: [ "form-person-section" ]
        }
      }
    };

    var schema = {
      type      : "object",
      properties: {
        contact: {
          title      : "Contact details",
          description: "How would you like to be contacted?",
          type       : "object",
          properties : {
            contactType: {
              title      : "Contact medium",
              description: "Please pick your preferred medium"
            }
          },
          oneOf: [
            {
              properties: {
                contactType: { enum: [ "Email" ] },
                email      : { title: "Email address" }
              }
            },
            {
              properties: {
                contactType: { enum: [ "Telephone" ] },
                phoneNumber: { title: "Telephone number" }
              }
            },
            {
              properties: {
                contactType: { enum: [ "Physical mail" ] },
                address    : { title: "Street address" },
                postcode   : { title: "Post or area code" },
                state      : { title: "State or province" },
                country    : { title: "Country" }
              }
            }
          ],
          "x-hints": { form: { selector: "contactType" } }
        }
      }
    };

    var schema = {
      "x-hints" : {
        form: {
          inputComponent: "uploader"
        }
      }
    };

    var Uploader = React.createClass({
      componentDidMount: function() {
        var input = document.createElement('input');
        input.type = 'file';
        input.multiple = false;
        input.addEventListener('change', this.loadFile);
        this._input = input;
      },

      loadFile: function(event) {
        var files = event.target.files;
        var handleData = this.handleData;
        var file = files[0];
        var reader = new FileReader();

        reader.onload = function(event) {
          handleData(file, event.target.result);
        };

        reader.readAsText(file);
      },

      handleData: function(file, data) {
        this.props.onChange({
          name: file.name,
          type: file.type,
          size: file.size,
          data: data.slice(0, 1000) // truncate data in this demo
        });
      },

      openSelector: function() {
        this._input.click();
      },

      handleKeyPress: function(event) {
        this.props.onKeyPress(event);
      },

      render: function() {
        return (
          <button onClick = { this.openSelector }>
            Select a file
          </button>
        );
      }
    });

    var onSubmit = function(data, buttonValue, errors) {
      alert('Data  : '+JSON.stringify(data)+'\n'+
            'Button: '+buttonValue+'\n'+
            'Errors: '+JSON.stringify(errors));
    };

    var handlers = {
      uploader: Uploader
    };

    ReactDOM.render(<Form
                   buttons  = {[]}
                   schema   = {schema}
                   onSubmit = {onSubmit}
                   handlers = {handlers}
                   submitOnChange = {true} />,
                 document.body);