var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', './DatePicker.Props', './DatePickerDay', './DatePickerMonth', '../../TextField', '../../utilities/KeyCodes', '../../utilities/css', '../../utilities/eventGroup/EventGroup', './DatePicker.scss'], function (require, exports, React, DatePicker_Props_1, DatePickerDay_1, DatePickerMonth_1, TextField_1, KeyCodes_1, css_1, EventGroup_1) {
    "use strict";
    var DatePicker = (function (_super) {
        __extends(DatePicker, _super);
        function DatePicker(props) {
            _super.call(this);
            var formatDate = props.formatDate, value = props.value;
            this.state = {
                selectedDate: value || new Date(),
                formattedDate: formatDate && value ? formatDate(value) : null,
                isDatePickerShown: false,
                errorMessage: ''
            };
            this._events = new EventGroup_1.EventGroup(this);
            this._preventFocusOpeningPicker = false;
            this._onSelectDate = this._onSelectDate.bind(this);
            this._onNavigateDate = this._onNavigateDate.bind(this);
            this._onGotoToday = this._onGotoToday.bind(this);
            this._onGotoTodayKeyDown = this._onGotoTodayKeyDown.bind(this);
            this._onDatePickerPopupKeyDown = this._onDatePickerPopupKeyDown.bind(this);
            this._onTextFieldFocus = this._onTextFieldFocus.bind(this);
            this._onTextFieldBlur = this._onTextFieldBlur.bind(this);
            this._onTextFieldKeyDown = this._onTextFieldKeyDown.bind(this);
            this._onTextFieldClick = this._onTextFieldClick.bind(this);
            this._onTextFieldChanged = this._onTextFieldChanged.bind(this);
            this._handleEscKey = this._handleEscKey.bind(this);
            this._validateTextInput = this._validateTextInput.bind(this);
        }
        DatePicker.prototype.componentDidMount = function () {
            this._events.on(window, 'scroll', this._dismissDatePickerPopup);
            this._events.on(window, 'resize', this._dismissDatePickerPopup);
            this._events.on(window, 'click', this._onClickCapture, true);
            this._events.on(window, 'focus', this._onClickCapture, true);
            this._events.on(window, 'touchstart', this._onClickCapture, true);
        };
        DatePicker.prototype.componentWillUnmount = function () {
            this._events.dispose();
        };
        DatePicker.prototype.componentDidUpdate = function () {
            if (this._focusOnSelectedDateOnUpdate) {
                this.refs.dayPicker.focus();
                this._focusOnSelectedDateOnUpdate = false;
            }
        };
        DatePicker.prototype.render = function () {
            var rootClass = 'ms-DatePicker';
            var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput;
            var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate, errorMessage = _b.errorMessage;
            return (React.createElement("div", {className: rootClass, ref: 'root'}, React.createElement("div", {ref: 'textFieldContainer'}, React.createElement(TextField_1.TextField, {ariaLabel: ariaLabel, "aria-haspopup": 'true', required: isRequired, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, iconClass: css_1.css('ms-Icon ms-Icon--event', label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label'), readOnly: !allowTextInput, value: formattedDate, ref: 'textField'})), isDatePickerShown && (React.createElement("div", {className: 'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused ' + (this.props.isMonthPickerVisible ? 'is-monthPickerVisible' : '')}, React.createElement("div", {className: 'ms-DatePicker-holder', onKeyDown: this._onDatePickerPopupKeyDown}, React.createElement("div", {className: 'ms-DatePicker-frame'}, React.createElement("div", {className: 'ms-DatePicker-wrap'}, React.createElement(DatePickerDay_1.DatePickerDay, {selectedDate: selectedDate, navigatedDate: navigatedDate, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: 'dayPicker'}), React.createElement(DatePickerMonth_1.DatePickerMonth, {navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate}), React.createElement("span", {className: 'ms-DatePicker-goToday js-goToday', onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0}, strings.goToToday))))))));
        };
        DatePicker.prototype._restoreFocusToTextField = function () {
            this._preventFocusOpeningPicker = true;
            this.refs.textField.focus();
        };
        DatePicker.prototype._navigateDay = function (date) {
            this.setState({
                navigatedDate: date
            });
        };
        DatePicker.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
            this._focusOnSelectedDateOnUpdate = this._focusOnSelectedDateOnUpdate || focusOnNavigatedDay;
            this._navigateDay(date);
        };
        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) : null,
            });
            this._restoreFocusToTextField();
            if (onSelectDate) {
                onSelectDate(date);
            }
        };
        ;
        DatePicker.prototype._onGotoToday = function () {
            this._focusOnSelectedDateOnUpdate = true;
            this._navigateDay(new Date());
        };
        ;
        DatePicker.prototype._onGotoTodayKeyDown = function (ev) {
            if (ev.which === KeyCodes_1.KeyCodes.enter) {
                ev.preventDefault();
                this._onGotoToday();
            }
        };
        ;
        DatePicker.prototype._onTextFieldFocus = function (ev) {
            if (!this.props.allowTextInput) {
                if (!this._preventFocusOpeningPicker) {
                    this._showDatePickerPopup();
                }
                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();
                }
                this.setState({
                    errorMessage: '',
                    formattedDate: newValue
                });
            }
        };
        DatePicker.prototype._onTextFieldKeyDown = function (ev) {
            switch (ev.which) {
                case KeyCodes_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._restoreFocusToTextField();
                            this._dismissDatePickerPopup();
                        }
                    }
                    break;
                case KeyCodes_1.KeyCodes.escape:
                    this._handleEscKey(ev);
                    break;
                default:
                    break;
            }
        };
        ;
        DatePicker.prototype._onDatePickerPopupKeyDown = function (ev) {
            switch (ev.which) {
                case KeyCodes_1.KeyCodes.enter:
                    ev.preventDefault();
                    break;
                case KeyCodes_1.KeyCodes.backspace:
                    ev.preventDefault();
                    break;
                case KeyCodes_1.KeyCodes.escape:
                    this._handleEscKey(ev);
                    break;
                default:
                    break;
            }
        };
        DatePicker.prototype._onClickCapture = function (ev) {
            if (!this.refs.root.contains(ev.target)) {
                this._dismissDatePickerPopup();
            }
        };
        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._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();
            }
        };
        DatePicker.prototype._handleEscKey = function (ev) {
            this._restoreFocusToTextField();
            this._dismissDatePickerPopup();
        };
        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;
            }
            var date = null;
            if (allowTextInput) {
                if (inputValue) {
                    date = parseDateFromString(inputValue);
                    if (!date) {
                        this.setState({
                            errorMessage: strings.invalidInputErrorMessage || '*'
                        });
                    }
                    else {
                        this.setState({
                            selectedDate: date,
                            formattedDate: formatDate && date ? formatDate(date) : null,
                            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);
            }
        };
        DatePicker.defaultProps = {
            allowTextInput: false,
            formatDate: function (date) {
                if (date) {
                    return date.toDateString();
                }
                return null;
            },
            parseDateFromString: function (dateStr) {
                var date = Date.parse(dateStr);
                if (date) {
                    return new Date(date);
                }
                return null;
            },
            firstDayOfWeek: DatePicker_Props_1.DayOfWeek.Sunday,
            isRequired: false,
            isMonthPickerVisible: true,
            strings: null
        };
        return DatePicker;
    }(React.Component));
    exports.DatePicker = DatePicker;
});
