import React, { Component } from 'react';
import ReactDOM from "react-dom";
import jsx from 'react-jsx';
import PropTypes from 'prop-types';

window.React = React; // ??????

class Form extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      value: '',
    };
  }

  onValueChange = (e) => {
    this.setState({ value: e.target.value });
  }

  getChildContext() {
    return {
      onSubmit: this.onSubmit,
      value: this.state.value,
      controlFunc: this.onValueChange
    };
  }

  onSubmit() {
    alert('Form clicked');
  }

  render() {
    return (
      <div>
        {this.state.value}
        {this.props.children}
      </div>
    );
  }
}

Form.childContextTypes = {
  onSubmit: PropTypes.func,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
  controlFunc: PropTypes.func,
};

class Button extends Component {
  render() {
    return (
      <div onClick={this.context.onSubmit}>
        Button
      </div>
    )
  }
}

Button.contextTypes = {
  onSubmit: PropTypes.func
}

class Input extends Component {
  render() {
    return (
      <input type="text" value={this.context.value} onChange={this.context.controlFunc} />
    );
  }
}

Input.contextTypes = {
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
  controlFunc: PropTypes.func,
}

const UIMappingForm = {
  Form,
  Button,
  Input,
};

export class StringToJsxComponent extends Component {
  render() {
    return jsx
      .client(`
        <Form>
          <Input />
          <Button/>
        </Form>
      `)(UIMappingForm);
  }
}


ReactDOM.render(
  <StringToJsxComponent />,
  document.getElementById("root")
);