"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var DateValues_1 = require("../../utilities/dateValues/DateValues");
var CalendarDay_1 = require("./CalendarDay");
var CalendarMonth_1 = require("./CalendarMonth");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var Utilities_1 = require("../../Utilities");
var stylesImport = require("./Calendar.scss");
var styles = stylesImport;
var leftArrow = 'ChevronLeft';
var rightArrow = 'ChevronRight';
var iconStrings = {
    leftNavigation: leftArrow,
    rightNavigation: rightArrow
};
var Calendar = (function (_super) {
    tslib_1.__extends(Calendar, _super);
    function Calendar(props) {
        var _this = _super.call(this, props) || this;
        var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
        _this.state = {
            selectedDate: currentDate,
            navigatedDate: currentDate,
            /** When showMonthPickerAsOverlay is active it overrides isMonthPickerVisible/isDayPickerVisible props (These props permanently set the visibility of their respective calendars). */
            isMonthPickerVisible: _this.props.showMonthPickerAsOverlay ? false : _this.props.isMonthPickerVisible,
            isDayPickerVisible: _this.props.showMonthPickerAsOverlay ? true : _this.props.isDayPickerVisible
        };
        _this._focusOnUpdate = false;
        return _this;
    }
    Calendar.prototype.componentWillReceiveProps = function (nextProps) {
        var autoNavigateOnSelection = nextProps.autoNavigateOnSelection, value = nextProps.value, _a = nextProps.today, today = _a === void 0 ? new Date() : _a;
        // Make sure auto-navigation is supported for programmatic changes to selected date, i.e.,
        // if selected date is updated via props, we may need to modify the navigated date
        var overrideNavigatedDate = (autoNavigateOnSelection && !DateMath_1.compareDates(value, this.props.value));
        if (overrideNavigatedDate) {
            this.setState({
                navigatedDate: value
            });
        }
        this.setState({
            selectedDate: value || today
        });
    };
    Calendar.prototype.componentDidUpdate = function () {
        if (this._focusOnUpdate) {
            // if the day picker is shown, focus on it
            if (this.refs.dayPicker) {
                this.refs.dayPicker.focus();
            }
            else if (this.refs.monthPicker) {
                this.refs.monthPicker.focus();
            }
            this._focusOnUpdate = false;
        }
    };
    Calendar.prototype.render = function () {
        var rootClass = 'ms-DatePicker';
        var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType, strings = _a.strings, showMonthPickerAsOverlay = _a.showMonthPickerAsOverlay, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday, highlightCurrentMonth = _a.highlightCurrentMonth, navigationIcons = _a.navigationIcons;
        var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate, isMonthPickerVisible = _b.isMonthPickerVisible, isDayPickerVisible = _b.isDayPickerVisible;
        var onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
        var showSmallMonthPicker = (isMonthPickerVisible && isDayPickerVisible) || (showMonthPickerAsOverlay && isMonthPickerVisible);
        return (React.createElement("div", { className: Utilities_1.css(rootClass, styles.root), ref: 'root', role: 'application' },
            React.createElement("div", { className: Utilities_1.css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, showSmallMonthPicker && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible), isMonthPickerVisible && !isDayPickerVisible && !showMonthPickerAsOverlay && ('is-onlymonthPickerVisible ' + styles.pickerOnlyMonthPickerVisible), showMonthPickerAsOverlay && styles.overlayedCalendars) },
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-holder ms-slideDownIn10', styles.holder), onKeyDown: this._onDatePickerPopupKeyDown },
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-frame', styles.frame) },
                        React.createElement("div", { className: Utilities_1.css('ms-DatePicker-wrap', styles.wrap, showGoToToday && styles.goTodaySpacing) },
                            isDayPickerVisible && React.createElement(CalendarDay_1.CalendarDay, { selectedDate: selectedDate, navigatedDate: navigatedDate, today: this.props.today, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, onDismiss: this.props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, autoNavigateOnSelection: autoNavigateOnSelection, strings: strings, onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, ref: 'dayPicker' }),
                            isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate, today: this.props.today, highlightCurrentMonth: highlightCurrentMonth, onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, ref: 'monthPicker' }),
                            showGoToToday &&
                                React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday)))))));
    };
    Calendar.prototype.focus = function () {
        if (this.refs.dayPicker) {
            this.refs.dayPicker.focus();
        }
    };
    Calendar.prototype._navigateDay = function (date) {
        this.setState({
            navigatedDate: date
        });
    };
    Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
        if (this.props.isDayPickerVisible) {
            this._navigateDay(date);
            this._focusOnUpdate = focusOnNavigatedDay;
        }
        else {
            // if only the month picker is shown, select the chosen month
            this._onSelectDate(date);
        }
    };
    Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
        var onSelectDate = this.props.onSelectDate;
        this.setState({
            selectedDate: date
        });
        if (onSelectDate) {
            onSelectDate(date, selectedDateRangeArray);
        }
    };
    Calendar.prototype._onHeaderSelect = function (focus) {
        this.setState({
            isDayPickerVisible: !this.state.isDayPickerVisible,
            isMonthPickerVisible: !this.state.isMonthPickerVisible
        });
        if (focus) {
            this._focusOnUpdate = true;
        }
    };
    Calendar.prototype._onGotoToday = function () {
        this._navigateDay(this.props.today);
        this._focusOnUpdate = true;
    };
    Calendar.prototype._onGotoTodayKeyDown = function (ev) {
        if (ev.which === 13 /* enter */ || ev.which === 32 /* space */) {
            ev.preventDefault();
            this._onGotoToday();
        }
        else if (ev.which === 9 /* tab */ && !ev.shiftKey) {
            if (this.props.onDismiss) {
                ev.stopPropagation();
                ev.preventDefault();
                this.props.onDismiss();
            }
        }
    };
    Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
        switch (ev.which) {
            case 13 /* enter */:
                ev.preventDefault();
                break;
            case 8 /* backspace */:
                ev.preventDefault();
                break;
            case 27 /* escape */:
                this._handleEscKey(ev);
                break;
            default:
                break;
        }
    };
    Calendar.prototype._handleEscKey = function (ev) {
        if (this.props.onDismiss != null) {
            this.props.onDismiss();
        }
    };
    Calendar.defaultProps = {
        onSelectDate: undefined,
        onDismiss: undefined,
        isMonthPickerVisible: true,
        isDayPickerVisible: true,
        showMonthPickerAsOverlay: false,
        value: undefined,
        today: new Date(),
        firstDayOfWeek: DateValues_1.DayOfWeek.Sunday,
        dateRangeType: DateValues_1.DateRangeType.Day,
        autoNavigateOnSelection: false,
        showGoToToday: true,
        strings: null,
        highlightCurrentMonth: false,
        navigationIcons: iconStrings
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_navigateDay", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_onNavigateDate", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_onSelectDate", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_onHeaderSelect", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_onGotoToday", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_onGotoTodayKeyDown", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Calendar.prototype, "_handleEscKey", null);
    return Calendar;
}(Utilities_1.BaseComponent));
exports.Calendar = Calendar;

//# sourceMappingURL=Calendar.js.map
