define(["require", "exports", "tslib", "react", "../../Calendar", "../../Callout", "../../common/DirectionalHint", "../../TextField", "../../Utilities", "../../utilities/dateMath/DateMath", "./DatePicker.scss"], function (require, exports, tslib_1, React, Calendar_1, Callout_1, DirectionalHint_1, TextField_1, Utilities_1, DateMath_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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 = (function (_super) {
        tslib_1.__extends(DatePicker, _super);
        function DatePicker(props) {
            var _this = _super.call(this) || this;
            var formatDate = props.formatDate, value = props.value;
            _this.state = {
                selectedDate: value || new Date(),
                formattedDate: (formatDate && value) ? formatDate(value) : '',
                isDatePickerShown: false,
                errorMessage: null
            };
            _this._preventFocusOpeningPicker = false;
            return _this;
        }
        DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
            var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value;
            var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null;
            // Set error message
            this.setState({
                errorMessage: errorMessage
            });
            // Issue# 1274: Check if the date value changed from old props 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.props.value;
            if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) {
                this.setState({
                    selectedDate: value || new Date(),
                    formattedDate: (formatDate && value) ? formatDate(value) : '',
                });
            }
        };
        DatePicker.prototype.render = function () {
            var _this = this;
            var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, disabled = _a.disabled, ariaLabel = _a.ariaLabel, pickerAriaLabel = _a.pickerAriaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput, borderless = _a.borderless, className = _a.className;
            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: 'root' },
                React.createElement("div", { ref: function (c) { return _this._datepicker = c; } },
                    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',
                            className: Utilities_1.css(label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel)
                        }, readOnly: !allowTextInput, value: formattedDate, ref: 'textField' })),
                isDatePickerShown && (React.createElement(Callout_1.Callout, { role: 'dialog', ariaLabel: pickerAriaLabel, isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, targetElement: this._datepicker, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned },
                    React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, value: selectedDate, firstDayOfWeek: firstDayOfWeek, strings: strings, 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) : '',
            });
            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 || '*') : null,
                    formattedDate: newValue
                });
            }
        };
        DatePicker.prototype._onTextFieldKeyDown = function (ev) {
            switch (ev.which) {
                case Utilities_1.KeyCodes.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 Utilities_1.KeyCodes.escape:
                    this._handleEscKey(ev);
                    break;
                default:
                    break;
            }
        };
        DatePicker.prototype._onTextFieldClick = function (ev) {
            if (!this.state.isDatePickerShown) {
                this._showDatePickerPopup();
            }
            else {
                if (this.props.allowTextInput) {
                    this.setState({
                        isDatePickerShown: false
                    });
                }
            }
        };
        DatePicker.prototype._showDatePickerPopup = function () {
            if (!this.state.isDatePickerShown) {
                this._preventFocusOpeningPicker = true;
                this._focusOnSelectedDateOnUpdate = true;
                this.setState({
                    isDatePickerShown: true,
                    navigatedDate: this.state.selectedDate,
                    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.refs.textField) {
                this.refs.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, formatDate = _a.formatDate, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate;
            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) {
                    date = parseDateFromString(inputValue);
                    if (!date) {
                        this.setState({
                            errorMessage: strings.invalidInputErrorMessage || '*'
                        });
                    }
                    else {
                        this.setState({
                            selectedDate: date,
                            errorMessage: ''
                        });
                    }
                }
                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);
                }
            }
        };
        return DatePicker;
    }(Utilities_1.BaseComponent));
    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,
        isRequired: false,
        isMonthPickerVisible: true,
        strings: DEFAULT_STRINGS,
        borderless: false,
        pickerAriaLabel: 'Calender',
    };
    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, "_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);
    exports.DatePicker = DatePicker;
});

//# sourceMappingURL=DatePicker.js.map
