"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Calendar_1 = require("../../Calendar");
var DateValues_1 = require("../../utilities/dateValues/DateValues");
var Callout_1 = require("../../Callout");
var TextField_1 = require("../../TextField");
var Utilities_1 = require("../../Utilities");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var stylesImport = require("./DatePicker.scss");
var styles = stylesImport;
var DEFAULT_STRINGS = {
    months: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ],
    shortMonths: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ],
    days: [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ],
    shortDays: [
        'S',
        'M',
        'T',
        'W',
        'T',
        'F',
        'S'
    ],
    goToToday: 'Go to today',
    prevMonthAriaLabel: 'Go to previous month',
    nextMonthAriaLabel: 'Go to next month',
    prevYearAriaLabel: 'Go to previous year',
    nextYearAriaLabel: 'Go to next year'
};
var DatePicker = /** @class */ (function (_super) {
    tslib_1.__extends(DatePicker, _super);
    function DatePicker(props) {
        var _this = _super.call(this, props) || this;
        var formatDate = props.formatDate, value = props.value;
        _this.state = {
            selectedDate: value || undefined,
            formattedDate: (formatDate && value) ? formatDate(value) : '',
            isDatePickerShown: false,
            errorMessage: undefined
        };
        _this._preventFocusOpeningPicker = false;
        return _this;
    }
    DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
        var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value, minDate = nextProps.minDate, maxDate = nextProps.maxDate;
        if (DateMath_1.compareDates(this.props.minDate, nextProps.minDate) &&
            DateMath_1.compareDates(this.props.maxDate, nextProps.maxDate) &&
            this.props.isRequired === nextProps.isRequired &&
            DateMath_1.compareDates(this.state.selectedDate, value) &&
            this.props.formatDate === formatDate) {
            // if the props we care about haven't changed, don't run validation or updates
            return;
        }
        var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : undefined;
        if (!errorMessage && value) {
            errorMessage = this._isDateOutOfBounds(value, minDate, maxDate) ? strings.isOutOfBoundsErrorMessage || '*' : undefined;
        }
        // Set error message
        this.setState({
            errorMessage: errorMessage
        });
        // Issue# 1274: Check if the date value changed from old value, i.e., if indeed a new date is being
        // passed in or if the formatting function was modified. We only update the selected date if either of these
        // had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this
        // is the result of the onSelectDate callback, but this should be a rare scenario.
        var oldValue = this.state.selectedDate;
        if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) {
            this.setState({
                selectedDate: value || undefined,
                formattedDate: (formatDate && value) ? formatDate(value) : '',
            });
        }
    };
    DatePicker.prototype.render = function () {
        var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, initialPickerDate = _a.initialPickerDate, isRequired = _a.isRequired, disabled = _a.disabled, ariaLabel = _a.ariaLabel, pickerAriaLabel = _a.pickerAriaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput, borderless = _a.borderless, className = _a.className, minDate = _a.minDate, maxDate = _a.maxDate, calendarProps = _a.calendarProps;
        var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, errorMessage = _b.errorMessage;
        return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker', styles.root, className), ref: this._resolveRef('_root') },
            React.createElement("div", { ref: this._resolveRef('_datepicker') },
                React.createElement(TextField_1.TextField, { className: styles.textField, ariaLabel: ariaLabel, "aria-haspopup": 'true', "aria-expanded": isDatePickerShown, required: isRequired, disabled: disabled, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, borderless: borderless, iconProps: {
                        iconName: 'Calendar',
                        onClick: this._onIconClick,
                        className: Utilities_1.css(disabled && styles.msDatePickerDisabled, label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel)
                    }, readOnly: !allowTextInput, value: formattedDate, ref: this._resolveRef('_textField'), role: allowTextInput ? 'combobox' : 'menu' })),
            isDatePickerShown && (React.createElement(Callout_1.Callout, { role: 'dialog', ariaLabel: pickerAriaLabel, isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, target: this._datepicker, directionalHint: 4 /* bottomLeftEdge */, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned },
                React.createElement(Calendar_1.Calendar, tslib_1.__assign({}, calendarProps, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, showMonthPickerAsOverlay: this.props.showMonthPickerAsOverlay, today: this.props.today, value: selectedDate || initialPickerDate, firstDayOfWeek: firstDayOfWeek, strings: strings, highlightCurrentMonth: this.props.highlightCurrentMonth, showWeekNumbers: this.props.showWeekNumbers, firstWeekOfYear: this.props.firstWeekOfYear, showGoToToday: this.props.showGoToToday, dateTimeFormatter: this.props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, ref: this._resolveRef('_calendar') }))))));
    };
    DatePicker.prototype._onSelectDate = function (date) {
        var _a = this.props, formatDate = _a.formatDate, onSelectDate = _a.onSelectDate;
        this.setState({
            selectedDate: date,
            isDatePickerShown: false,
            formattedDate: formatDate && date ? formatDate(date) : '',
        }, function () {
            if (onSelectDate) {
                onSelectDate(date);
            }
        });
    };
    DatePicker.prototype._onCalloutPositioned = function () {
        this._calendar.focus();
    };
    DatePicker.prototype._onTextFieldFocus = function (ev) {
        if (this.props.disableAutoFocus) {
            return;
        }
        if (!this.props.allowTextInput) {
            if (!this._preventFocusOpeningPicker) {
                this._showDatePickerPopup();
            }
            else {
                this._preventFocusOpeningPicker = false;
            }
        }
    };
    DatePicker.prototype._onTextFieldBlur = function (ev) {
        this._validateTextInput();
    };
    DatePicker.prototype._onTextFieldChanged = function (newValue) {
        if (this.props.allowTextInput) {
            if (this.state.isDatePickerShown) {
                this._dismissDatePickerPopup();
            }
            var _a = this.props, isRequired = _a.isRequired, value = _a.value, strings = _a.strings;
            this.setState({
                errorMessage: (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : undefined,
                formattedDate: newValue
            });
        }
    };
    DatePicker.prototype._onTextFieldKeyDown = function (ev) {
        switch (ev.which) {
            case 13 /* enter */:
                ev.preventDefault();
                ev.stopPropagation();
                if (!this.state.isDatePickerShown) {
                    this._showDatePickerPopup();
                }
                else {
                    // When DatePicker allows input date string directly,
                    // it is expected to hit another enter to close the popup
                    if (this.props.allowTextInput) {
                        this._dismissDatePickerPopup();
                    }
                }
                break;
            case 27 /* escape */:
                this._handleEscKey(ev);
                break;
            default:
                break;
        }
    };
    DatePicker.prototype._onTextFieldClick = function (ev) {
        if (!this.state.isDatePickerShown && !this.props.disabled) {
            this._showDatePickerPopup();
        }
        else {
            if (this.props.allowTextInput) {
                this.setState({
                    isDatePickerShown: false
                });
            }
        }
    };
    DatePicker.prototype._onIconClick = function (ev) {
        ev.stopPropagation();
        this._onTextFieldClick(ev);
    };
    DatePicker.prototype._showDatePickerPopup = function () {
        if (!this.state.isDatePickerShown) {
            this._preventFocusOpeningPicker = true;
            this._focusOnSelectedDateOnUpdate = true;
            this.setState({
                isDatePickerShown: true,
                errorMessage: ''
            });
        }
    };
    DatePicker.prototype._dismissDatePickerPopup = function () {
        if (this.state.isDatePickerShown) {
            this.setState({
                isDatePickerShown: false
            });
            this._validateTextInput();
        }
    };
    /**
     * Callback for closing the calendar callout
     */
    DatePicker.prototype._calendarDismissed = function () {
        this._preventFocusOpeningPicker = true;
        this._dismissDatePickerPopup();
        if (this._textField) {
            this._textField.focus();
        }
    };
    DatePicker.prototype._handleEscKey = function (ev) {
        this._calendarDismissed();
    };
    DatePicker.prototype._validateTextInput = function () {
        var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate, formatDate = _a.formatDate, minDate = _a.minDate, maxDate = _a.maxDate;
        var inputValue = this.state.formattedDate;
        // Do validation only if DatePicker's popup is dismissed
        if (this.state.isDatePickerShown) {
            return;
        }
        // Check when DatePicker is a required field but has NO input value
        if (isRequired && !inputValue) {
            this.setState({
                // Since fabic react doesn't have loc support yet
                // use the symbol '*' to represent error message
                errorMessage: strings.isRequiredErrorMessage || '*'
            });
            return;
        }
        if (allowTextInput) {
            var date = null;
            if (inputValue) {
                // Don't parse if the selected date has the same formatted string as what we're about to parse.
                // The formatted string might be ambiguous (ex: "1/2/3" or "New Year Eve") and the parser might
                // not be able to come up with the exact same date.
                if (this.state.selectedDate && formatDate && formatDate(this.state.selectedDate) === inputValue) {
                    date = this.state.selectedDate;
                }
                else {
                    date = parseDateFromString(inputValue);
                    // Check if date is null, or date is Invalid Date
                    if (!date || isNaN(date.getTime())) {
                        // Reset invalid input field, if formatting is available
                        if (formatDate) {
                            date = this.state.selectedDate;
                            this.setState({
                                formattedDate: formatDate(date).toString()
                            });
                        }
                        this.setState({
                            errorMessage: strings.invalidInputErrorMessage || '*'
                        });
                    }
                    else {
                        // Check against optional date boundaries
                        if (this._isDateOutOfBounds(date, minDate, maxDate)) {
                            this.setState({
                                errorMessage: strings.isOutOfBoundsErrorMessage || '*'
                            });
                        }
                        else {
                            this.setState({
                                selectedDate: date,
                                errorMessage: ''
                            });
                            // When formatting is available. If formatted date is valid, but is different from input, update with formatted date
                            // This occurs when an invalid date is entered twice
                            if (formatDate && formatDate(date) !== inputValue) {
                                this.setState({
                                    formattedDate: formatDate(date).toString()
                                });
                            }
                        }
                    }
                }
            }
            else {
                // No input date string shouldn't be an error if field is not required
                this.setState({
                    errorMessage: ''
                });
            }
            // Execute onSelectDate callback
            if (onSelectDate) {
                // If no input date string or input date string is invalid
                // date variable will be null, callback should expect null value for this case
                onSelectDate(date);
            }
        }
    };
    DatePicker.prototype._isDateOutOfBounds = function (date, minDate, maxDate) {
        return ((!!minDate && DateMath_1.compareDatePart(minDate, date) > 0) || (!!maxDate && DateMath_1.compareDatePart(maxDate, date) < 0));
    };
    DatePicker.defaultProps = {
        allowTextInput: false,
        formatDate: function (date) {
            if (date) {
                return date.toDateString();
            }
            return '';
        },
        parseDateFromString: function (dateStr) {
            var date = Date.parse(dateStr);
            if (date) {
                return new Date(date);
            }
            return null;
        },
        firstDayOfWeek: Calendar_1.DayOfWeek.Sunday,
        initialPickerDate: new Date(),
        isRequired: false,
        isMonthPickerVisible: true,
        showMonthPickerAsOverlay: false,
        strings: DEFAULT_STRINGS,
        highlightCurrentMonth: false,
        borderless: false,
        pickerAriaLabel: 'Calender',
        showWeekNumbers: false,
        firstWeekOfYear: DateValues_1.FirstWeekOfYear.FirstDay,
        showGoToToday: true,
        dateTimeFormatter: undefined
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onSelectDate", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onCalloutPositioned", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onTextFieldFocus", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onTextFieldBlur", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onTextFieldChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onTextFieldKeyDown", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onTextFieldClick", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_onIconClick", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_dismissDatePickerPopup", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_calendarDismissed", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_handleEscKey", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DatePicker.prototype, "_validateTextInput", null);
    return DatePicker;
}(Utilities_1.BaseComponent));
exports.DatePicker = DatePicker;
//# sourceMappingURL=DatePicker.js.map