content: 'use strict';
  import React from 'react'
  import ReactDOM from 'react-dom'
  import Button from 'react-bootstrap/lib/Button';
  import Glyphicon from 'react-bootstrap/lib/Glyphicon';
  import moment from 'moment';
  import DateRangePicker from 'react-bootstrap-daterangepicker';
  
  
  class DateRangeFilter extends React.Component {
  
      constructor(props) {
          super(props);
          this.dateChanged = this.dateChanged.bind(this);
          this.state = {
              ranges: {
                      'Hoje': [moment(), moment()],
                      'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                      'Últimos 7 dias': [moment().subtract(7, 'days'), moment()],
                      'Últimos 30 dias': [moment().subtract(31, 'days'), moment()],
                      'Este mês': [moment().startOf('month'), moment().endOf('month')],
                      'Último mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                      'Desde sempre': [moment("01/01/2000"), moment("01/01/2050")],
              },
              startDate: moment().subtract(31, 'days'),
              endDate: moment()
          };
      }
  
      dateChanged(event, picker) {
  
  		this.setState({
  			startDate: picker.startDate,
  			endDate: picker.endDate
  		});
  		this.props.updateDate(picker.startDate.format('DD/MM/YYYY'), 
  			picker.endDate.format('DD/MM/YYYY'));
  	}
  
  	/*
      handleEvent(event, picker) {
  		console.log('EVENT EVENT HANDLING');
  		console.log('ranges: ' + picker.ranges)
  		console.log('ranges: ' + picker.ranges['Hoje'])
  		console.log('startDate: ' + picker.startDate)
  		console.log('endDate: ' + picker.endDate)
  
  		this.setState({
  			startDate: picker.startDate,
  			endDate: picker.endDate
  		});
  		dateChanged(event, picker);
  	}
  	*/
  
  
  
  	render() {
  		var darkAges = moment("01/01/1000").format('DD/MM/YYYY');
  		var recentDarkAges = moment("01/01/2000").format('DD/MM/YYYY');
  		var start = this.state.startDate.format('DD/MM/YYYY');
  		var end = this.state.endDate.format('DD/MM/YYYY');
  
  		var label =start + ' - ' + end;
  		if (start === end) {
  			label = start;
  		}else if( start === darkAges){
  			label = "Desde Sempre ";
  		}else if( start == recentDarkAges ){
  			label = "Desde Sempre ";
  		}
  		return (
  			<DateRangePicker startDate={this.state.startDate} 
  					endDate={this.state.endDate} 
  					ranges={this.state.ranges} 
  					onEvent={this.dateChanged}>
  				<Button className="selected-date-range-btn" style={{width:'100%'}}>
  					<div className="pull-left"><Glyphicon glyph="calendar" /></div>
  					<div className="pull-right">
  						<span>
  							{label}
  						</span>
  						<span className="caret"></span>
  					</div>
  				</Button>
  			</DateRangePicker>
  
  		);
  	}
  }
  
  export default DateRangeFilter
  
  
  
  