"use strict";
var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
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 Calendar = (function (_super) {
    __extends(Calendar, _super);
    function Calendar(props) {
        var _this = _super.call(this) || this;
        var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
        _this.state = {
            selectedDate: currentDate,
            navigatedDate: currentDate
        };
        _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) {
            this.refs.dayPicker.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, isMonthPickerVisible = _a.isMonthPickerVisible, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday;
        var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate;
        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, isMonthPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible)) },
                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) },
                            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, ref: 'dayPicker' }),
                            isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate }),
                            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) {
        this._navigateDay(date);
        this._focusOnUpdate = focusOnNavigatedDay;
    };
    Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
        var onSelectDate = this.props.onSelectDate;
        this.setState({
            selectedDate: date
        });
        if (onSelectDate) {
            onSelectDate(date, selectedDateRangeArray);
        }
    };
    Calendar.prototype._onGotoToday = function () {
        this._navigateDay(this.props.today);
        this._focusOnUpdate = true;
    };
    Calendar.prototype._onGotoTodayKeyDown = function (ev) {
        if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
            ev.preventDefault();
            this._onGotoToday();
        }
        else if (ev.which === Utilities_1.KeyCodes.tab && !ev.shiftKey) {
            if (this.props.onDismiss) {
                ev.stopPropagation();
                ev.preventDefault();
                this.props.onDismiss();
            }
        }
    };
    Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
        switch (ev.which) {
            case Utilities_1.KeyCodes.enter:
                ev.preventDefault();
                break;
            case Utilities_1.KeyCodes.backspace:
                ev.preventDefault();
                break;
            case Utilities_1.KeyCodes.escape:
                this._handleEscKey(ev);
                break;
            default:
                break;
        }
    };
    Calendar.prototype._handleEscKey = function (ev) {
        if (this.props.onDismiss() != null) {
            this.props.onDismiss();
        }
    };
    return Calendar;
}(Utilities_1.BaseComponent));
Calendar.defaultProps = {
    onSelectDate: null,
    onDismiss: null,
    isMonthPickerVisible: true,
    value: null,
    today: new Date(),
    firstDayOfWeek: DateValues_1.DayOfWeek.Sunday,
    dateRangeType: DateValues_1.DateRangeType.Day,
    autoNavigateOnSelection: false,
    showGoToToday: true,
    strings: null
};
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_navigateDay", null);
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_onNavigateDate", null);
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_onSelectDate", null);
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_onGotoToday", null);
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_onGotoTodayKeyDown", null);
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
__decorate([
    Utilities_1.autobind
], Calendar.prototype, "_handleEscKey", null);
exports.Calendar = Calendar;

//# sourceMappingURL=Calendar.js.map
