import React, { Component } from 'react';
import './App.css';
import Clock from './Clock';
import {FormGroup, FormControl, Button} from 'react-bootstrap';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      deadline: 'December 25 2017',
      newDeadline: ''
    }
  }

  updateDeadline() {
    if (isNaN(Date.parse(this.state.newDeadline)) || this.state.newDeadline === '') {
      this.setState({deadline: this.state.deadline});
    } else {
      this.setState({deadline: this.state.newDeadline})
    }
  }
  // should I keep this update function separate as is or
  // can I save 3 lines of code and embed
  // ```this.setState({newDeadline: event.target.value})```
  // directly in the callback function below?
  // eg onChange={event => this.setState({newDeadline: event.target.value}}
  updateNewDeadline(event) {
    this.setState({newDeadline: event.target.value})
  }

  render() {
    return (
      <div className="app">
        <div className="app-title">Countdown To {this.state.deadline}</div>
        <Clock deadline={this.state.deadline} />
        <form className="app-form">
          <FormGroup>
            <FormControl className="deadline-input"
              placeholder='Enter a new date'
              onChange={event => this.updateNewDeadline(event)}
            />
            <Button bsStyle="primary" block onClick={() => this.updateDeadline()}>Submit</Button>
          </FormGroup>
        </form>
      </div>
    )
  }
}

export default App;