import React from 'react';
import {
  withStyles,
  autobind,
  killEvent,
  extractValue,
} from 'react-decoration';

@withStyles({
  container: {
    width: '100%',
    height: 'auto',
  },
  input: {
    width: 250,
  },
})
class InputField extends React.Component {

  state = {
    value: 'Hello!'
  }

  @autobind
  checkValue() {
    return !isNaN(new Date(this.state.value));
  }

  @killEvent
  @extractValue
  handleChange(value) {
    this.setState({
      value,
    });
  }

  render() {
    const { styles } = this.props;
    return (
      <div style={styles.container}>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
          style={styles.input}
        />
        {
          !this.checkValue() && (
            <p>Formatting error</p>
          )
        }
      </div>
    );
  }
}