import React from 'react';
import DateTime from 'react-datetime';
import moment from 'moment';
import { LabelWrapper, WarningWrapper, InputWrapper } from './../StyledWrappers';
import { DateTimeFieldWrapper } from './StyledWrapper';

class DateTimePicker extends React.Component {

    static get propTypes() {
        return {
            label: React.PropTypes.string,
            isRequired: React.PropTypes.bool,
            valid: React.PropTypes.func,
            error: React.PropTypes.bool,
            minDate: React.PropTypes.number,
            maxDate: React.PropTypes.number,
            timeConstraints: React.PropTypes.object,
            onDateChange: React.PropTypes.func,
            placeholder: React.PropTypes.string,
            disabled: React.PropTypes.bool,
            className: React.PropTypes.string,
            labelClassName: React.PropTypes.string,
            inputWrapperClassName: React.PropTypes.string,
            warningClassName: React.PropTypes.string
        };
    }

    constructor(props) {
        super(props);
        let currentDate = new moment()
        let { minDate, maxDate } = this.getMinMaxDates(props);
        let value = props.value || currentDate;
        let timeConstraints = this.getTimeConstraints({minDate, maxDate, value});
        this.state = {
            value,
            minDate,
            maxDate,
            timeConstraints
        };
    }

    validate = () => {
        let validate = (!this.props.isRequired || (this.props.isRequired &&this.state.value));
        if(!validate) {
            this.setState({warning: 'Please upload valid file', error: true});
        }
        return validate;
    }

    getTimeConstraints = (props) => {
        let { minDate, maxDate, value } = props;
        let constraints = {};
        let hourContraints = {
            min: minDate.isSame(value, 'day') ? minDate.hour() : 0,
            max: maxDate.isSame(value, 'day') ? maxDate.hour() : 23
        }
        let minuteConstraints = {
            min: minDate.isSame(value, 'day') && minDate.isSame(value, 'hour') ? minDate.minute() : 0,
            max: maxDate.isSame(value, 'day') && maxDate.isSame(value, 'hour') ? maxDate.minute() : 59,
        };
        constraints.hours = hourContraints;
        constraints.minutes = minuteConstraints;
        return constraints;
    }

    getMinMaxDates = (props) => {
        let minDate = moment().subtract(10, 'year'), maxDate = moment().add(10, 'year');
        if(props.minDate) {
            minDate = moment(props.minDate);
        }
        if(props.maxDate) {
            maxDate = moment(props.maxDate);
        }
        return {
            minDate,
            maxDate
        }
    }

    valid = ( current ) => {
        if(this.props.valid){
            return this.props.valid(current);
        }
        else{
            let { minDate, maxDate } = this.state;
            return current.isBetween(minDate, maxDate, 'day', '[]');
            // return current.isSameOrAfter(minDate) && current.isSameOrBefore(maxDate);
        }
    };

    onDateSelect = (value) => {
        let { minDate, maxDate } = this.state;
        let timeConstraints = this.getTimeConstraints({minDate, maxDate, value});
        this.setState({value, timeConstraints},()=>{
            if(this.props.onDateChange) {
                this.props.onDateChange(this.state.value);
            }
        });            
    }

    componentWillReceiveProps(nextProps) {
        if(this.state.error !== nextProps.error) {
            this.setState({ error: nextProps.error });
        }
        if(this.state.warning !== nextProps.warning) {
            this.setState({ warning: nextProps.warning });
        }   
        // if(this.state.value !== nextProps.value) {
        //     this.setState({value: nextProps.value})
        // }
    }

    componentDidMount() {
        if(!this.props.value && this.props.onDateChange){
            this.props.onDateChange(this.state.value);
        }
    }

    render() {
        const props = this.props;
        console.log('render DateTimePicker', this.state);
        return (
            <DateTimeFieldWrapper className={`${this.props.disabled ? 'disabled' : ''} ${this.props.className}`}>
                {this.props.label && <LabelWrapper className={this.props.labelClassName}>{`${this.props.label}${this.props.isRequired && this.props.label ? ' *' : ''}`}</LabelWrapper>}
                <InputWrapper className={`date-input-wrapper ${this.props.inputWrapperClassName}`}>
                    <DateTime 
                        inputProps={{'placeholder':this.props.placeHolder, 'disabled':this.props.disabled}} 
                        value={this.state.value} 
                        dateFormat={this.props.disabled ? false : 'MMM D, YYYY'}
                        isValidDate={this.valid} 
                        onChange={this.onDateSelect} 
                        timeFormat={true} 
                        timeConstraints={this.state.timeConstraints}
                        className={this.props.error ? 'error' : ''}
                    />
                </InputWrapper>
                {this.props.warning && <WarningWrapper className={this.props.warningClassName}>{this.props.warning}</WarningWrapper>}
            </DateTimeFieldWrapper>
        );
    }
}

export default DateTimePicker;