"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
var Calendar_1 = require("office-ui-fabric-react/lib/Calendar");
var DayPickerStrings = {
    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'
};
var CalendarButtonExample = /** @class */ (function (_super) {
    tslib_1.__extends(CalendarButtonExample, _super);
    function CalendarButtonExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            showCalendar: false,
            selectedDate: null
        };
        _this._onClick = _this._onClick.bind(_this);
        _this._onDismiss = _this._onDismiss.bind(_this);
        _this._onSelectDate = _this._onSelectDate.bind(_this);
        return _this;
    }
    CalendarButtonExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("div", { ref: function (calendarBtn) { return _this._calendarButtonElement = calendarBtn; } },
                React.createElement(Button_1.DefaultButton, { onClick: this._onClick, text: !this.state.selectedDate ? this.props.buttonString : this.state.selectedDate.toLocaleDateString() })),
            this.state.showCalendar && (React.createElement(Callout_1.Callout, { isBeakVisible: false, className: 'ms-DatePicker-callout', gapSpace: 0, doNotLayer: false, target: this._calendarButtonElement, directionalHint: 4 /* bottomLeftEdge */, onDismiss: this._onDismiss, setInitialFocus: false },
                React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._onDismiss, isMonthPickerVisible: true, value: this.state.selectedDate, firstDayOfWeek: Calendar_1.DayOfWeek.Sunday, strings: DayPickerStrings, isDayPickerVisible: this.props.isDayPickerVisible, highlightCurrentMonth: this.props.highlightCurrentMonth })))));
    };
    CalendarButtonExample.prototype._onClick = function (event) {
        this.setState(function (prevState) {
            prevState.showCalendar = !prevState.showCalendar;
            return prevState;
        });
    };
    CalendarButtonExample.prototype._onDismiss = function () {
        this.setState(function (prevState) {
            prevState.showCalendar = false;
            return prevState;
        });
    };
    CalendarButtonExample.prototype._onSelectDate = function (date) {
        this.setState(function (prevState) {
            prevState.showCalendar = false;
            prevState.selectedDate = date;
            return prevState;
        });
    };
    CalendarButtonExample.defaultProps = {
        isDayPickerVisible: true,
        buttonString: 'Click for Calendar'
    };
    return CalendarButtonExample;
}(React.Component));
exports.CalendarButtonExample = CalendarButtonExample;
//# sourceMappingURL=Calendar.Button.Example.js.map