import React from 'react';
import _ from 'lodash';
import 'react-dates/initialize';
import {FormGroup, FormGroupProps} from '../FormGroup';
import {DayRangePickerControl} from './DayRangePickerControl';
import PropTypes from 'prop-types';
import {dateRangePickerValueFormatter} from './datePickerHelpers';

export type DayRangePickerProps = {
    startDate?: number | object;
    endDate?: number | object;

    valueFormatter?: Function;
    onChange?: Function;
    numberOfMonths?: number;

    dayPickerProps?: object;
    inputProps?: object;
    ranges?: object;

    maxDate?: number | object;
    minDate?: number | object;
} & FormGroupProps &
    Partial<DayRangePickerDefaultProps>;

type DayRangePickerDefaultProps = {
    testAutomationId: string;
    valueFormatter: Function;
    dayPickerProps: object;
    numberOfMonths: number;
    inputProps: object;
};

export class DayRangePicker extends FormGroup<
    DayRangePickerProps & React.HTMLProps<DayRangePicker>
> {
    static propTypes = {
        ...FormGroup.propTypes,
        startDate: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
        endDate: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),

        valueFormatter: PropTypes.func,
        onChange: PropTypes.func,
        numberOfMonths: PropTypes.number,

        dayPickerProps: PropTypes.object,
        inputProps: PropTypes.object,
        ranges: PropTypes.object,

        maxDate: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
        minDate: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
    };

    static defaultProps = {
        ...FormGroup.defaultProps,
        startDate: null,
        endDate: null,
        testAutomationId: 'datePicker',

        valueFormatter: dateRangePickerValueFormatter,

        dayPickerProps: {},
        numberOfMonths: 2,
        inputProps: {},
        ranges: null,
        maxDate: null,
        minDate: null
    };

    filterGroupProps(props) {
        return _.omit(props, [
            'ranges',
            'startDate',
            'endDate',
            'valueFormatter',
            'maxDate',
            'dayPickerProps',
            'numberOfMonths',
            'inputProps',
            'minDate',
            'locale'
        ]);
    }

    renderInput(hasError) {
        let ariaDescProps = this.getAriaDescProps(hasError);
        const {startDate, endDate} = this.props;

        return (
            <DayRangePickerControl
                startDate={startDate}
                endDate={endDate}
                {...this.getSafeProps(this.props)}
                ref="control"
                hasFormGroupContainer
                {...ariaDescProps}
            />
        );
    }
}
