import React from 'react'

import client from '../client'

import moment from 'moment'

import { DateRange } from 'react-date-range';

export default class MealFilter extends React.Component {
  constructor(){
    super()
    const start = new Date ()
    const end = new Date ()
    end.setDate(end.getDate()-6)
    this.state = {
      startDate: moment(start),
      endDate: moment(end),
      startTime: 0,
      endTime: 23,
    }
    this.handleSelect = this.handleSelect.bind(this)
  }
  handleSelect(range){
    console.log(range)
    // range.startDate; // Momentjs object
    // range.endDate
    this.setState(range)
  }
  pickTimeRange(event,start,end){
    this.setState({startTime: start, endTime: end})
  }

  render(){
    var times = [
      [0, 11, 'Breakfast'],
      [12, 15, 'Lunch'],
      [15, 23, 'Dinner'],
      [0, 23, 'All'],
    ].map( (r,i) => {
      const start = r[0]
      const end = r[1]
      const name = r[2]
      let className = ''
      if (this.state.startTime === start && this.state.endTime === end) {
        className = 'selected'
      }
      return (
        <button
          key={i}
          className={className}
          onClick={(e) => {this.pickTimeRange(e,start,end)}}>
          {name}
        </button>
      )
    })
    return (
      <div>
        <DateRange
          onInit={this.handleSelect}
          onChange={this.handleSelect}
          startDate={this.state.startDate}
          endDate={this.state.endDate}
        />
        {times}
      </div>
    )
  }
}


// class MealFilter extends React.Component {
//   constructor(props){
//     super()
//     this.state = {
//       fromDate: new Date (),
//       toDate: new Date (),
//       fromTime: new Date (),
//       toTime: new Date (),
//     }
//     this.updateState = this.updateState.bind(this)
//   }
//   updateState(e){
//     const name = event.target.name
//     let value = event.target.value
//     if (name === 'date') {
//       value = new Date(value + 'T' + this.state.date.split("T")[1] ).toString()
//     } else if (name === 'time') {
//       value = new Date(this.state.date.split("T")[0] + value).toString()
//     }
//     this.setState({
//       [name]: value,
//       error: null,
//     })
//   }
//   render () {
//     const fromDate = parseDate(this.state.fromDate)
//     const toDate = parseDate(this.state.toDate)
//     const fromTime = parseTime(this.state.fromTime)
//     const toTime = parseTime(this.state.toTime)
//     return (
//       <div>
//         Filter by date:
//         <input type='date' name='fromDate' placeholder='From date' value={fromDate} required onChange={this.updateState} />
//         to
//         <input type='date' name='toDate' placeholder='To date' value={toDate} required onChange={this.updateState} />
//         and from time
//         <input type='time' name='fromTime' placeholder='From iime' value={fromTime} required onChange={this.updateState} step='3600' />
//         to
//         <input type='time' name='toTime' placeholder='To time' value={toTime} required onChange={this.updateState} step='3600' />
//       </div>
//     )
//   }
// }