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", "../../Utilities", "../../FocusZone", "../../utilities/dateMath/DateMath", "./Calendar.scss"], function (require, exports, React, Utilities_1, FocusZone_1, DateMath_1, Calendar_scss_1) {
    "use strict";
    var DAYS_IN_WEEK = 7;
    var CalendarDay = (function (_super) {
        __extends(CalendarDay, _super);
        function CalendarDay(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                activeDescendantId: Utilities_1.getId('DatePickerDay-active'),
                weeks: _this._getWeeks(props.navigatedDate, props.selectedDate)
            };
            _this._onSelectNextMonth = _this._onSelectNextMonth.bind(_this);
            _this._onSelectPrevMonth = _this._onSelectPrevMonth.bind(_this);
            return _this;
        }
        CalendarDay.prototype.componentWillReceiveProps = function (nextProps) {
            this.setState({
                weeks: this._getWeeks(nextProps.navigatedDate, nextProps.selectedDate)
            });
        };
        CalendarDay.prototype.render = function () {
            var _this = this;
            var _a = this.state, activeDescendantId = _a.activeDescendantId, weeks = _a.weeks;
            var _b = this.props, firstDayOfWeek = _b.firstDayOfWeek, strings = _b.strings, navigatedDate = _b.navigatedDate, onSelectDate = _b.onSelectDate;
            var selectDayCallbacks = {};
            weeks.map(function (week, index) { return week.map(function (day) { return selectDayCallbacks[day.key] = onSelectDate.bind(_this, day.originalDate); }); });
            return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-dayPicker', Calendar_scss_1.default.dayPicker) },
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', Calendar_scss_1.default.header) },
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-month', Calendar_scss_1.default.month) }, strings.months[navigatedDate.getMonth()]),
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-year', Calendar_scss_1.default.year) }, navigatedDate.getFullYear())),
                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthComponents', Calendar_scss_1.default.monthComponents) },
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', Calendar_scss_1.default.navContainer) },
                        React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevMonth js-prevMonth', Calendar_scss_1.default.prevMonth), onClick: this._onSelectPrevMonth, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevMonth), tabIndex: 0 },
                            React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !Utilities_1.getRTL(), 'ms-Icon--ChevronRight': Utilities_1.getRTL() }) })),
                        React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextMonth js-nextMonth', Calendar_scss_1.default.nextMonth), onClick: this._onSelectNextMonth, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextMonth), tabIndex: 0 },
                            React.createElement("i", { className: Utilities_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': Utilities_1.getRTL(), 'ms-Icon--ChevronRight': !Utilities_1.getRTL() }) }))),
                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-headerToggleView js-showMonthPicker', Calendar_scss_1.default.headerToggleView) })),
                React.createElement(FocusZone_1.FocusZone, null,
                    React.createElement("table", { className: Utilities_1.css('ms-DatePicker-table', Calendar_scss_1.default.table), role: 'grid', "aria-readonly": 'true', "aria-multiselectable": 'false', "aria-activedescendant": activeDescendantId },
                        React.createElement("thead", null,
                            React.createElement("tr", null, strings.shortDays.map(function (val, index) {
                                return React.createElement("th", { className: Utilities_1.css('ms-DatePicker-weekday', Calendar_scss_1.default.weekday), scope: 'col', key: index, title: strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }, strings.shortDays[(index + firstDayOfWeek) % DAYS_IN_WEEK]);
                            }))),
                        React.createElement("tbody", null, weeks.map(function (week, weekIndex) {
                            return React.createElement("tr", { key: weekIndex }, week.map(function (day, dayIndex) {
                                return React.createElement("td", { role: 'presentation', key: day.key },
                                    React.createElement("div", { className: Utilities_1.css('ms-DatePicker-day', Calendar_scss_1.default.day, (_a = {},
                                            _a['ms-DatePicker-day--infocus ' + Calendar_scss_1.default.dayIsFocused] = day.isInMonth,
                                            _a['ms-DatePicker-day--outfocus ' + Calendar_scss_1.default.dayIsUnfocused] = !day.isInMonth,
                                            _a['ms-DatePicker-day--today ' + Calendar_scss_1.default.dayIsToday] = day.isToday,
                                            _a['ms-DatePicker-day--highlighted ' + Calendar_scss_1.default.dayIsHighlighted] = day.isSelected,
                                            _a)), role: 'gridcell', onClick: selectDayCallbacks[day.key], onKeyDown: function (ev) {
                                            return _this._navigateMonthEdge(ev, day.originalDate, weekIndex, dayIndex);
                                        }, "aria-selected": day.isSelected, id: DateMath_1.compareDates(navigatedDate, day.originalDate) ? activeDescendantId : null, "data-is-focusable": true, ref: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null, key: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null }, day.date));
                                var _a;
                            }));
                        }))))));
        };
        CalendarDay.prototype.focus = function () {
            if (this.refs.navigatedDay) {
                this.refs.navigatedDay.tabIndex = 0;
                this.refs.navigatedDay.focus();
            }
        };
        CalendarDay.prototype._navigateMonthEdge = function (ev, date, weekIndex, dayIndex) {
            if (weekIndex === 0 && ev.which === Utilities_1.KeyCodes.up) {
                this.props.onNavigateDate(DateMath_1.addWeeks(date, -1), true);
                ev.preventDefault();
            }
            else if (weekIndex === (this.state.weeks.length - 1) && ev.which === Utilities_1.KeyCodes.down) {
                this.props.onNavigateDate(DateMath_1.addWeeks(date, 1), true);
                ev.preventDefault();
            }
            else if (dayIndex === 0 && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left)) {
                this.props.onNavigateDate(DateMath_1.addDays(date, -1), true);
                ev.preventDefault();
            }
            else if (dayIndex === (DAYS_IN_WEEK - 1) && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)) {
                this.props.onNavigateDate(DateMath_1.addDays(date, 1), true);
                ev.preventDefault();
            }
        };
        CalendarDay.prototype._onKeyDown = function (callback, ev) {
            if (ev.which === Utilities_1.KeyCodes.enter) {
                callback();
            }
        };
        CalendarDay.prototype._onSelectNextMonth = function () {
            this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, 1), false);
        };
        CalendarDay.prototype._onSelectPrevMonth = function () {
            this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, -1), false);
        };
        CalendarDay.prototype._getWeeks = function (navigatedDate, selectedDate) {
            var firstDayOfWeek = this.props.firstDayOfWeek;
            var date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
            var today = new Date();
            var weeks = [];
            var week;
            // Cycle the date backwards to get to the first day of the week.
            while (date.getDay() !== firstDayOfWeek) {
                date.setDate(date.getDate() - 1);
            }
            // a flag to indicate whether all days of the week are in the month
            var isAllDaysOfWeekOutOfMonth = false;
            for (var weekIndex = 0; !isAllDaysOfWeekOutOfMonth; weekIndex++) {
                week = [];
                isAllDaysOfWeekOutOfMonth = true;
                for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
                    var dayInfo = {
                        key: date.toString(),
                        date: date.getDate(),
                        originalDate: new Date(date.toString()),
                        isInMonth: date.getMonth() === navigatedDate.getMonth(),
                        isToday: DateMath_1.compareDates(today, date),
                        isSelected: DateMath_1.compareDates(selectedDate, date)
                    };
                    week.push(dayInfo);
                    if (dayInfo.isInMonth) {
                        isAllDaysOfWeekOutOfMonth = false;
                    }
                    date.setDate(date.getDate() + 1);
                }
                if (!isAllDaysOfWeekOutOfMonth) {
                    weeks.push(week);
                }
            }
            return weeks;
        };
        return CalendarDay;
    }(Utilities_1.BaseComponent));
    exports.CalendarDay = CalendarDay;
});

//# sourceMappingURL=CalendarDay.js.map
