import React from 'react';
import PropTypes from 'prop-types';

import DatePicker from "react-datepicker";
import IDUtil from '../../util/IDUtil';
import moment from "moment";

class DatePickerSelector extends React.Component {
    constructor(props) {
        super(props);
        this.CLASS_PREFIX = 'dps';
        PropTypes.checkPropTypes(DatePickerSelector.propTypes, this.props, 'prop', this.constructor.name);
    }

    getStartDate() {
        if (this.props.dateRange) {
            if (this.props.dateRange.start !== null) {
                return moment(this.props.dateRange.start).toDate();
            }
        }
        return null;
    }

    getEndDate() {
        if (this.props.dateRange) {
            if (this.props.dateRange.end !== null) {
                return moment(this.props.dateRange.end).toDate();
            }
        }
        return null;
    }

    //FIXME the date calculations are really ugly right now... (also in endDateChanged)
    startDateChanged(d) {
       let start = null;
       if (d){
           let tzOffset = moment(d)
                .toString()
                .split(" ")[5]
                .slice(-4)
                .slice(0, 2);
            start = moment(d).add(parseInt(tzOffset), "hours");
        }
        this.props.onOutput(this.constructor.name, {
            start : start ? start.toDate() : null,
            end: this.getEndDate()
        });
    }

    endDateChanged(d) {
        let end = null;
        if (d){
            let tzOffset = moment(d)
                .toString()
                .split(" ")[5]
                .slice(-4)
                .slice(0, 2);
            end = moment(d).add(parseInt(tzOffset), "hours");
        }
        this.props.onOutput(this.constructor.name, {
            start: this.getStartDate(),
            end : end ? end.toDate() : null
        });
    }

    removeDateFilter = e => {
        switch (e) {
            case 'startDate':
                this.startDateChanged(null);
                break;
            case 'endDate':
                this.endDateChanged(null);
                break;
            default:
                return null;
        }
    };

    removeDateFilterBtn = params => (
        <span
            className="remove-date-filter"
            title={params.title}
            onClick={() => this.removeDateFilter(params.dateToRemove)}>
                    <i className="fa fa-close"/>
        </span>
    );

    render() {
        const startDate = this.getStartDate();
        const endDate = this.getEndDate();

        const removeStartBtn = startDate ? this.removeDateFilterBtn({title: "Remove start date", dateToRemove: "startDate" }) : null;
        const removeEndBtn = endDate ? this.removeDateFilterBtn({title: "Remove end date", dateToRemove: "endDate" }) : null;

        return (
            <div className={IDUtil.cssClassName('date-picker-selector', this.CLASS_PREFIX)}>
                <DatePicker
                    disabled={this.props.disabled}
                    selected={startDate}
                    selectsStart={true}
                    openToDate={this.props.minDate}
                    minDate={this.props.minDate}
                    maxDate={this.props.maxDate}
                    onChange={this.startDateChanged.bind(this)}
                    showMonthDropdown={true}
                    showYearDropdown={true}
                    dropdownMode="select"
                    className="form-control"
                    placeholderText="Start date"
                />
                {removeStartBtn}
                to
                <DatePicker
                    disabled={this.props.disabled}
                    selected={endDate}
                    selectsEnd={true}
                    openToDate={this.props.maxDate}
                    minDate={this.props.minDate}
                    maxDate={this.props.maxDate}
                    onChange={this.endDateChanged.bind(this)}
                    showMonthDropdown={true}
                    showYearDropdown={true}
                    dropdownMode="select"
                    className="form-control"
                    placeholderText="End date"
                />
                {removeEndBtn}
            </div>
        );
    }
}
DatePickerSelector.propTypes = {
    dateRange: PropTypes.shape({
        end: PropTypes.number,
        field: PropTypes.string.isRequired,
        start: PropTypes.number
    }).isRequired,
    disabled: PropTypes.bool,
    maxDate: PropTypes.object,
    minDate: PropTypes.object,
    onOutput: PropTypes.func.isRequired
};
export default DatePickerSelector;
