var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React from 'react';
import PropTypes from 'prop-types';
import { TextInputControl } from '../TextInputControl';
import { DayPickerSingleDateController } from 'react-dates';
import moment from 'moment';
import { TimePicker } from './TimePicker';
import { is24HoursMode } from './datePickerHelpers';
import { DatePickerBase } from './DatePickerBase';
import { MonthYearDropDown } from './MonthYearDropDown';
import { Button } from '../../Button';
import { translate } from '../../../../utils';
import { playMessage } from '../../../utils/playMessage';
import { renderCalendarDayContent } from './renderCalendarDayContent';
import { wait } from '../../..';
import lang from '../../../../lang/common/index-en_US';
var WAIT_CALENDAR_READY_TIMEOUT = 1;
var SingleDatePickerInputControl = /** @class */ (function (_super) {
    __extends(SingleDatePickerInputControl, _super);
    function SingleDatePickerInputControl() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = __assign({}, _super.prototype['state'], { isMonthYearEditing: false, value: _this.getDateTimeValue() });
        _this.notifyDateTimeChange = function (momentValue) {
            var value = moment(momentValue);
            var onChange = _this.getPropsFromContext().onChange;
            onChange(_this.getFormattedReturnValue(value));
        };
        /**
         * @param {Moment} newValue
         * */
        _this.onDateChange = function (newValue) {
            var oldValue = _this.getDateTimeValue();
            var oldMomentValue = moment(oldValue);
            var value = moment(newValue);
            if (oldValue) {
                value = value
                    .hour(oldMomentValue.hour())
                    .minute(oldMomentValue.minute())
                    .second(oldMomentValue.second());
            }
            _this.setState({ value: value }, function () { return _this.notifyDateTimeChange(value); });
            _this.closeDayPicker();
            _this.toggleIsInputFocusedFromOutside(false);
            _this.focusToInput();
        };
        _this.onTimeChange = function (_a) {
            var hours = _a.hours, minutes = _a.minutes;
            var newValue = moment(_this.getDateTimeMomentValue())
                .hour(hours)
                .minute(minutes);
            _this.setState({ value: newValue }, function () {
                _this.notifyDateTimeChange(newValue);
                playMessage(_this.getTimePickerPromptMessage(newValue));
            });
        };
        _this.initialVisibleMonth = function () {
            var value = _this.getDateTimeValue();
            return value ? moment(value) : moment();
        };
        _this.handleSwitchToMonthYearEditing = function () {
            return _this.blurDateCell().then(function () { return _this.setState({ isMonthYearEditing: true }); });
        };
        _this.onSwitchToMonthYearText = function () { return _this.setState({ isMonthYearEditing: false }); };
        /* eslint-disable react/prop-types */
        _this.renderMonthsDropDown = function (_a) {
            var month = _a.month, onMonthSelect = _a.onMonthSelect, onYearSelect = _a.onYearSelect;
            var _b = _this.props, monthAriaLabel = _b.monthAriaLabel, yearAriaLabel = _b.yearAriaLabel, yearsAfterCurrent = _b.yearsAfterCurrent, yearsBeforeCurrent = _b.yearsBeforeCurrent;
            var onMonthSelectHandler = function (month, value) {
                onMonthSelect(month, value);
                _this.onSwitchToMonthYearText();
            };
            var onYearSelectHandler = function (month, value) {
                onYearSelect(month, value);
                _this.onSwitchToMonthYearText();
            };
            return (React.createElement(MonthYearDropDown, { month: month, onMonthSelect: onMonthSelectHandler, onYearSelect: onYearSelectHandler, monthAriaLabel: monthAriaLabel, yearAriaLabel: yearAriaLabel, yearsBeforeCurrent: yearsBeforeCurrent, yearsAfterCurrent: yearsAfterCurrent }));
        };
        _this.renderMonthYearText = function (_a) {
            var month = _a.month;
            var _b = _this.props, monthYearFormat = _b.monthYearFormat, monthYearBtnAriaLabel = _b.monthYearBtnAriaLabel;
            var ariaLabel = translate(monthYearBtnAriaLabel, {
                month: month.format('MMMM'),
                year: month.year()
            });
            return (React.createElement(Button, { testAutomationId: "editYearMonthButton", bsStyle: "link", onClick: _this.handleSwitchToMonthYearEditing, "aria-label": ariaLabel },
                React.createElement("strong", null, month.format(monthYearFormat))));
        };
        _this.handleBackFromTimePicker = function () { return wait(WAIT_CALENDAR_READY_TIMEOUT).then(_this.focusOnDateCell); };
        _this.renderTimePicker = function () {
            var _a = _this.props, hasOnlyDate = _a.hasOnlyDate, timeFormat = _a.timeFormat, timePickerHourDecreaseBtnAriaLabel = _a.timePickerHourDecreaseBtnAriaLabel, timePickerHourIncreaseBtnAriaLabel = _a.timePickerHourIncreaseBtnAriaLabel, timePickerMinuteDecreaseBtnAriaLabel = _a.timePickerMinuteDecreaseBtnAriaLabel, timePickerMinuteIncreaseBtnAriaLabel = _a.timePickerMinuteIncreaseBtnAriaLabel, timeAmAriaLabel = _a.timeAmAriaLabel, timePmAriaLabel = _a.timePmAriaLabel, amPmSwitcherLabel = _a.amPmSwitcherLabel, enableAMTitle = _a.enableAMTitle, enablePMTitle = _a.enablePMTitle, timePickerAriaDescription = _a.timePickerAriaDescription;
            if (hasOnlyDate) {
                return null;
            }
            var value = _this.getTimeValue();
            var ariaDescription = translate(timePickerAriaDescription, {
                time: moment(value).format(timeFormat)
            });
            return (React.createElement("div", { onMouseUp: _this.blurDateCell },
                React.createElement(TimePicker, { onChange: _this.onTimeChange, value: value, is24hour: is24HoursMode(timeFormat), onPanelFocus: _this.blurDateCell, onBackToCalendar: _this.handleBackFromTimePicker, ariaDescription: ariaDescription, hourIncreaseBtnAriaLabel: timePickerHourIncreaseBtnAriaLabel, hourDecreaseBtnAriaLabel: timePickerHourDecreaseBtnAriaLabel, minuteIncreaseBtnAriaLabel: timePickerMinuteIncreaseBtnAriaLabel, minuteDecreaseBtnAriaLabel: timePickerMinuteDecreaseBtnAriaLabel, amAriaLabel: timeAmAriaLabel, pmAriaLabel: timePmAriaLabel, amPmSwitcherLabel: amPmSwitcherLabel, enablePMTitle: enablePMTitle, enableAMTitle: enableAMTitle })));
        };
        _this.getTimePickerPromptMessage = function (timeValue) {
            var _a = _this.props, timeFormat = _a.timeFormat, timePickerCurrentTimeSettingAriaPrompt = _a.timePickerCurrentTimeSettingAriaPrompt;
            return translate(timePickerCurrentTimeSettingAriaPrompt, {
                time: moment(timeValue).format(timeFormat)
            });
        };
        _this.handleMouseUpDayPickerContainer = function () {
            _this.onSwitchToMonthYearText();
        };
        /** @override */
        _this.getDisplayValue = function () {
            var value = _this.getDateTimeValue();
            var _a = _this.props, dateFormat = _a.dateFormat, timeFormat = _a.timeFormat, hasOnlyDate = _a.hasOnlyDate, hasOnlyTime = _a.hasOnlyTime;
            if (!value) {
                return '';
            }
            if (!moment(value).isValid()) {
                return value;
            }
            var formatArr = [];
            if (!hasOnlyTime) {
                formatArr.push(dateFormat);
            }
            if (!hasOnlyDate) {
                formatArr.push(timeFormat);
            }
            return moment(value).format(formatArr.join(' '));
        };
        /** @override */
        _this.renderDatePicker = function () {
            var hasOnlyTime = _this.props.hasOnlyTime;
            return hasOnlyTime ? _this.renderTimePicker() : _this.renderSingleDatePicker();
        };
        return _this;
    }
    SingleDatePickerInputControl.prototype.parseUtcValue = function (value) {
        var utc = this.props.utc;
        if (value) {
            return utc ? moment.utc(value) : moment(value);
        }
        return null;
    };
    SingleDatePickerInputControl.prototype.getDateTimeValue = function () {
        var value = this.getPropsFromContext().value;
        return this.parseUtcValue(value);
    };
    SingleDatePickerInputControl.prototype.getFormattedReturnValue = function (value) {
        var _a = this.props, hasStringFormat = _a.hasStringFormat, hasTimestampFormat = _a.hasTimestampFormat, hasMomentFormat = _a.hasMomentFormat;
        if (!value) {
            return null;
        }
        if (typeof value === 'string') {
            return value;
        }
        if (hasStringFormat) {
            return value.format();
        }
        if (hasTimestampFormat) {
            return Number(value.toDate());
        }
        if (hasMomentFormat) {
            return value;
        }
        return value.toDate();
    };
    SingleDatePickerInputControl.prototype.getDateTimeMomentValue = function () {
        var value = this.getDateTimeValue();
        if (!value || !moment(value).isValid()) {
            value = moment();
        }
        else {
            value = moment(value);
        }
        return value;
    };
    SingleDatePickerInputControl.prototype.getTimeValue = function () {
        var value = this.getDateTimeMomentValue();
        return {
            hours: value.hour(),
            minutes: value.minute()
        };
    };
    /* eslint-enable react/prop-types */
    SingleDatePickerInputControl.prototype.renderSingleDatePicker = function () {
        var _this = this;
        var _a = this.props, numberOfMonths = _a.numberOfMonths, singleDatePickerProps = _a.singleDatePickerProps, isValidDate = _a.isValidDate;
        var _b = this.state, isDayPickerFocused = _b.isDayPickerFocused, isDayPickerVisible = _b.isDayPickerVisible;
        var value = this.getDateTimeValue();
        var renderMonthElement = this.state.isMonthYearEditing
            ? this.renderMonthsDropDown
            : this.renderMonthYearText;
        return isDayPickerVisible ? (React.createElement(DayPickerSingleDateController, __assign({ renderCalendarInfo: this.renderTimePicker, calendarInfoPosition: 'after', isFocused: isDayPickerFocused, focused: true, initialVisibleMonth: this.initialVisibleMonth, onBlur: this.closeDayPicker, numberOfMonths: numberOfMonths, onDateChange: function (newValue) { return _this.onDateChange(newValue); }, renderMonthElement: renderMonthElement, date: moment(value), isOutsideRange: function (day) { return !isValidDate('days', day); }, hideKeyboardShortcutsPanel: true, phrases: this.getPhrases(), renderDayContents: renderCalendarDayContent }, singleDatePickerProps))) : null;
    };
    SingleDatePickerInputControl.prototype.getDatePickerContainerClassName = function () {
        return 'rc-datepicker-single';
    };
    SingleDatePickerInputControl.propTypes = __assign({}, TextInputControl.propTypes, DatePickerBase.propTypes, { dateFormat: PropTypes.string, timeFormat: PropTypes.string, utc: PropTypes.bool, hasOnlyDate: PropTypes.bool, hasOnlyTime: PropTypes.bool, hasStringFormat: PropTypes.bool, hasMomentFormat: PropTypes.bool, hasTimestampFormat: PropTypes.bool, onChange: PropTypes.func, numberOfMonths: PropTypes.number, isValidDate: PropTypes.func, singleDatePickerProps: PropTypes.object, inputProps: PropTypes.object, monthYearFormat: PropTypes.string, ariaTextDatePickerDescribe: PropTypes.string, ariaTextSelectedDateValue: PropTypes.string, ariaTextNextMonth: PropTypes.string, ariaTextPrevMonth: PropTypes.string, timePickerAriaDescription: PropTypes.string, timePickerCurrentTimeSettingAriaPrompt: PropTypes.string, timePickerHourIncreaseBtnAriaLabel: PropTypes.string.isRequired, timePickerHourDecreaseBtnAriaLabel: PropTypes.string.isRequired, timePickerMinuteIncreaseBtnAriaLabel: PropTypes.string.isRequired, timePickerMinuteDecreaseBtnAriaLabel: PropTypes.string.isRequired, timeAmAriaLabel: PropTypes.string, timePmAriaLabel: PropTypes.string, amPmSwitcherLabel: PropTypes.string, enablePMTitle: PropTypes.string, enableAMTitle: PropTypes.string, monthYearBtnAriaLabel: PropTypes.string, monthAriaLabel: PropTypes.string, yearAriaLabel: PropTypes.string, yearsBeforeCurrent: PropTypes.number, yearsAfterCurrent: PropTypes.number });
    SingleDatePickerInputControl.defaultProps = __assign({}, DatePickerBase.defaultProps, TextInputControl.defaultProps, { testAutomationId: 'dateTimePicker', dateFormat: 'L', timeFormat: 'h:mm A', utc: false, hasOnlyTime: false, hasOnlyDate: false, numberOfMonths: 1, isValidDate: function (mode, currentDay) { return true; }, singleDatePickerProps: {}, inputProps: {}, monthYearFormat: 'MMMM YYYY', get timePickerCurrentTimeSettingAriaPrompt() {
            return lang.TIME_PICKER_ARIA_CURRENT_TIME;
        },
        get timePickerAriaDescription() {
            return lang.TIME_PICKER_ARIA_DESCRIPTION;
        },
        get timePickerHourIncreaseBtnAriaLabel() {
            return lang.TIME_PICKER_HOUR_INCREASE_ARIA_LABEL;
        },
        get timePickerHourDecreaseBtnAriaLabel() {
            return lang.TIME_PICKER_HOUR_DECREASE_ARIA_LABEL;
        },
        get timePickerMinuteIncreaseBtnAriaLabel() {
            return lang.TIME_PICKER_MINUTE_INCREASE_ARIA_LABEL;
        },
        get timePickerMinuteDecreaseBtnAriaLabel() {
            return lang.TIME_PICKER_MINUTE_DECREASE_ARIA_LABEL;
        },
        get timeAmAriaLabel() {
            return lang.TIME_PICKER_AM;
        },
        get timePmAriaLabel() {
            return lang.TIME_PICKER_PM;
        },
        get monthYearBtnAriaLabel() {
            return lang.DATE_PICKER_MONTH_BUTTON_ARIA_LABEL;
        },
        get monthAriaLabel() {
            return lang.DATE_PICKER_MONTH_DROPDOWN_ARIA_LABEL;
        },
        get yearAriaLabel() {
            return lang.DATE_PICKER_YEAR_DROPDOWN_ARIA_LABEL;
        },
        get amPmSwitcherLabel() {
            return lang.AM_PM_SWITCHER;
        },
        get enablePMTitle() {
            return lang.CLICK_TO_ENABLE_PM;
        },
        get enableAMTitle() {
            return lang.CLICK_TO_ENABLE_AM;
        }, yearsBeforeCurrent: 100, yearsAfterCurrent: 100, hasStringFormat: false, hasMomentFormat: false, hasTimestampFormat: false });
    return SingleDatePickerInputControl;
}(DatePickerBase));
export { SingleDatePickerInputControl };
//# sourceMappingURL=SingleDatePickerInputControl.js.map