content: /**
   *
   * DatePicker
   *
   */
  
  import React from 'react';
  
  import { FormattedMessage } from 'react-intl';
  import messages from './messages';
  
  class DatePicker extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  
    ONE_DAY = 1000 * 60 * 60 * 24;
    DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  
    constructor(props) {
      super(props);
      this.state = {
        date: new Date(),
      };
    }
  
    getNewDate(offsetDays) {
      const time = this.state.date.getTime();
      const newDate = new Date();
      newDate.setTime(time + (this.ONE_DAY * offsetDays));
      return newDate;
    }
  
    increment() {
      this.setState({
        date: this.getNewDate(1),
      });
    }
  
    decrement() {
      this.setState({
        date: this.getNewDate(-1),
      });
    }
  
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const dayOfWeek = this.DAYS[date.getDay()];
      return `${dayOfWeek} ${year}-${month}-${day}`;
    }
  
    render() {
      return (
        <div className={'row'} style={{ maxWidth: '300px' }}>
          <div className={'col-sm-3'}>
            <button onClick={(e) => this.decrement(e)}
              className={'glyphicon glyphicon-chevron-left'}
            />
          </div>
          <div className="col-sm-6">{this.formatDate(this.state.date)}</div>
          <div className={'col-sm-3'}>
            <button onClick={(e) => this.increment(e)}
              className={'glyphicon glyphicon-chevron-right'}
            />
          </div>
        </div>
      );
    }
  }
  
  export default DatePicker;
  