import React from 'react';

const stylesheet = {
  input: {
    display: 'table-cell',
    boxSizing: 'border-box',
    verticalAlign: 'middle',
    height: '26px',
    width: '100%',
    outline: 'none',
    border: '0px',
    fontSize: '12px',
    padding: '5px',
    color: 'rgb(130, 130, 130)',
  },
  textarea: {
    display: 'table-cell',
    boxSizing: 'border-box',
    verticalAlign: 'middle',
    minHeight: '100px',
    width: '100%',
    outline: 'none',
    border: '0px',
    fontSize: '12px',
    padding: '5px',
    color: 'rgb(130, 130, 130)',
  },
  field: {
    display: 'table-row',
    padding: '5px',
    color: 'rgb(130, 130, 130)',
  },
  label: {
    display: 'table-cell',
    boxSizing: 'border-box',
    paddingRight: '5px',
    textAlign: 'right',
    width: '20px',
    fontSize: '13px',
  },
};

export default class PropField extends React.Component {
  constructor(props) {
    super(props);
    this._onChange = this.onChange.bind(this);
    this._onChangeBool = this.onChangeBool.bind(this);
  }

  onChange(e) {
    this.props.onChange(this.props.name, e.target.value);
  }

  onChangeBool(e) {
    this.props.onChange(this.props.name, e.target.checked);
  }

  render() {
    const type = this.props.type;

    if (type === 'func') {
      return null;
    }

    let inputElem = (
      <input
        id={this.props.name}
        style={stylesheet.input}
        value={this.props.value}
        onChange={this._onChange}
      />
    );

    if (type === 'object') {
      inputElem = (
        <textarea
          id={this.props.name}
          style={stylesheet.textarea}
          value={this.props.value}
          onChange={this._onChange}
        />
      );
    }

    if (type === 'number') {
      inputElem = (
        <input
          id={this.props.name}
          style={stylesheet.input}
          value={this.props.value}
          type="number"
          onChange={this._onChange}
        />
      );
    }

    if (type === 'boolean') {
      inputElem = (
        <input
          id={this.props.name}
          style={stylesheet.input}
          checked={this.props.value}
          value={this.props.value}
          type="checkbox"
          onChange={this._onChangeBool}
        />
      );
    }

    return (
      <div style={stylesheet.field}>
        <label htmlFor={this.props.name} style={stylesheet.label}>
          {`${this.props.name}`}
        </label>
        { inputElem }
      </div>
    );
  }
}

PropField.propTypes = {
  name: React.PropTypes.string.isRequired,
  onChange: React.PropTypes.func.isRequired,
  type: React.PropTypes.oneOf(['text', 'object', 'number', 'boolean']),
  value: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.bool,
  ]).isRequired,
};

@@ -301,270 +301,8 @@
  %7D,%0A
-  textarea: %7B%0A    display: 'table-cell',%0A    boxSizing: 'border-box',%0A    verticalAlign: 'middle',%0A    minHeight: '100px',%0A    width: '100%25',%0A    outline: 'none',%0A    border: '0px',%0A    fontSize: '12px',%0A    padding: '5px',%0A    color: 'rgb(130, 130, 130)',%0A  %7D,%0A
   fi
@@ -304,24 +304,24 @@
 %0A  field: %7B%0A
+
     display:
@@ -558,12 +558,148 @@
  %7D,%0A
-
 %7D;%0A%0A
+stylesheet.textarea = %7B%0A  ...stylesheet.input,%0A  height: '100px',%0A%7D%0A%0Astylesheet.checkbox = %7B%0A  ...stylesheet.input,%0A  width: 'auto',%0A%7D%0A%0A
 expo
@@ -1947,37 +1947,40 @@
 yle=%7Bstylesheet.
-input
+checkbox
 %7D%0A          chec

Use a separate style for checkbox