import React, { PropTypes } from 'react';

import baseStyles from './base.css';
import themeStyles from './oaxaca-theme.css';

const propTypes = {
  defaultValue: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
};

const Input = ({ defaultValue, name, onChange, placeholder }) => {
  let debounce;

  const onChangeWithDebounce = e => {
    clearTimeout( debounce );
    debounce = setTimeout(() => {
      onChange( e.target.value );
    }, 500 );
  };

  return (
    <input
      className={[
        baseStyles.regular,
        themeStyles.regular,
      ].join( ' ' )}
      defaultValue={ defaultValue }
      name={ name }
      onChange={ onChangeWithDebounce }
      placeholder={ placeholder }
    />
  );
};

Input.propTypes = propTypes;

export default Input;

@@ -394,24 +394,56 @@
 ce = e =%3E %7B%0A
+    const %7B value %7D = e.target;%0A
     clearTim
@@ -514,17 +514,8 @@
 ge( 
-e.target.
 valu

read input value onchange before timeout