import React from 'react';
import moment from 'moment';
import querystring from 'querystring';
import axios from 'axios';
import DatePicker from 'react-datepicker';

var baseUrl = 'http://localhost:3000/users/api/';
// var baseUrl = 'http://cap1.extrahop.com/users/api/';

//bootstrap
import { Button } from 'react-bootstrap';
import {Glyphicon} from 'react-bootstrap';


class DateRangePicker extends React.Component {
    constructor(props){
    super(props);
    this.state = {
      startDate:moment().subtract(3,'months'),
        //selectableStartDate:moment().subtract(1, 'years'),
      endDate:moment()
    };
    // const onChangeStart = props.onChangeStart;
    // const onChangeEnd = props.onChangeEnd;
    this.handleChangeEnd = this.handleChangeEnd.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
        //this.handleChange = this.handleChange.bind(this);
  }

  handleChangeStart(date){
    this.setState({startDate: date});
    console.log(this.state.startDate);
    this.props.onChangeStart(date);
  }

  handleChangeEnd(date) {
    this.setState({endDate: date});
    this.props.onChangeEnd(date);
    console.log(this.state.endDate);
  }


  componentWillMount(){
    this.props.onChangeStart(this.state.startDate);
    this.props.onChangeEnd(this.state.endDate);
  }


  render(){

    return(
    <div id="datepicker">
    <div id="date">Date Range</div>
    <DatePicker
        selected={this.state.startDate}
        selectsStart
        startDate={this.state.startDate}
        endDate={this.state.endDate}
        // onChange={date => this.onChange({startDate})}
        onChange={date => this.handleChangeStart(date)}
        dropdownMode={'scroll'}
    />
    <DatePicker
        selected={this.state.endDate}
        selectsEnd
        startDate={this.state.startDate}
        endDate={this.state.endDate}
        // onChange={date => this.onChange({endDate})}
        onChange={date => this.handleChangeEnd(date)}
        dropdownMode={'scroll'}
    />
    </div>
     
  )


  }

}

 

export default DateRangePicker;