import React from 'react';
import moment from 'moment';
import {DateRangePicker} from 'react-dates';
import { DayRangePickerWrapper } from './StyledWrapper';


export default class DayRangePicker extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            focusedInput: "startDate",
            inputStateOpen: true
        };
        this.onFocusChange = this.onFocusChange;

    }


    componentDidMount(){
        if(this.props.startDate && this.props.endDate){
            this.setState({
                startDate : moment(this.props.startDate),
                endDate : moment(this.props.endDate),
                inputStateOpen: true
            })
        }else{
            this.setState({
                startDate : null,
                endDate : null,
                inputStateOpen: true
            })
        }
    }

    onFocusChange = (_self, focusedInput) => {
        if(focusedInput.focusedInput === null){
            this.setState({ focusedInput: focusedInput.focusedInput, inputStateOpen: false});
            this.props.onClose();
        }
        else{
            this.setState({ focusedInput: focusedInput.focusedInput});
        }
    }


    handleDateChange = ({ startDate, endDate }) => {
        this.setState({ startDate, endDate });
        this.setProperties(startDate,endDate);

        this.props.onCalendarDataChange(startDate, endDate);
        if(endDate !== null)
            this.setState({inputStateOpen: false});
        else{
            this.setState({inputStateOpen: true});
        }
    };

    setProperties(startDate,endDate){
        if((startDate && endDate) || (!startDate && !endDate)){
            var obj = {};
            obj.props = this.props;
            obj.selectedStartDate = startDate ? startDate.startOf('day')._d.valueOf() : null;
            obj.selectedEndDate =  endDate ? endDate.endOf('day')._d.valueOf() : null;
            obj.filterType = 'CALENDAR_FILTER';
            this.props.applyFilters(obj);
        }
    }

    handleClear = (type) => {
        let startDate = null;
        let endDate = null;
        this.setState({ startDate, endDate });
        this.setProperties(startDate,endDate);
        this.setState({ focusedInput: "startDate"});
    }

    handleOutClick = () => {
        console.log("args -", arguments);
    }

    handleOutsideClick = () => {

    }



    render(){
        return (
            <DayRangePickerWrapper>
                <DateRangePicker
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onDatesChange={this.handleDateChange}
                    focusedInput={this.state.focusedInput}
                    onFocusChange={focusedInput => this.onFocusChange(this, {focusedInput})}
                    isOutsideRange={() => false} 
                    onClose = {this.handleOutsideClick}
                    displayFormat="D MMM, YYYY"
                    showClearDates
                />
            </DayRangePickerWrapper>
        );
    }
}
