const MyInput = props => (
  <input
    disabled={props.disabled}
    type="text"
    className="input"
    placeholder={props.inputPlaceholder}
    value={props.inputValue}
    onChange={props.inputOnChange}
  />
);

//Higher-order Component 1
//return: Functional (stateless) component
const WithLabel = Component => {
  return props => (
    <div className="field">
      <label className="label">{props.label}</label>
      <div className="control">
        <Component {...props} />
      </div>
    </div>
  );
};

//HOC 2
//komponen yang punya checkbox utk disable/enable
//return: Stateful component
const ToggleAble = Component =>{
  return class extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        enabled: false
      }
    }
    toggleComponent(e){      
      this.setState({
        enabled: e.target.checked
      })
    }
    render(){
      const props = this.props;
      const enabled = this.state.enabled;
      return (
        <div className="field">
          <div className="control">
            <input type="checkbox" 
               onChange={this.toggleComponent.bind(this)} /> {props.checkboxLabel}
            <Component disabled={!enabled} {...props} />
          </div>
        </div>
      )
    }
  }
}

const InputWithLabel = WithLabel(MyInput);
const ToggleAbleInput = ToggleAble(MyInput);

////////////////// FORM 

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      isChecked: false
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleNameChange(e) {
    //stop event biar name input.value
    //nggak langsung diupdate
    e.preventDefault();
    this.setState({
      //konversi ke huruf besar
      name: e.target.value.toUpperCase()
    });
  }

  handleCheckboxChange(e) {
    this.setState({
      isChecked: !this.state.isChecked
    });
  }

  submit(e) {
    e.preventDefault();
    alert(JSON.stringify(this.state));
  }

  render() {
    return (
      <form>
        <InputWithLabel           
          label="Enter Name" 
          inputOnChange={this.handleNameChange}
          inputValue={this.state.name}
          inputPlaceholder="Enter name here"/>

        <ToggleAbleInput 
          checkboxLabel="Aktifin input di bawah" 
          inputOnChange={this.handleNameChange}
          inputValue={this.state.name}
          inputPlaceholder="Cek dulu checkbox di atas"/>

        <button className="button is-info" onClick={this.submit}>
          Ok
        </button>
      </form>
    );
  }
}

/////////////////// ROOT

const App = () => <MyForm />;

ReactDOM.render(<App />, document.getElementById("app"));