import * as tslib_1 from "tslib";
import * as React from 'react';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { DatePicker, DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker';
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',
    prevMonthAriaLabel: 'Go to previous month',
    nextMonthAriaLabel: 'Go to next month',
    prevYearAriaLabel: 'Go to previous year',
    nextYearAriaLabel: 'Go to next year'
};
var DatePickerBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(DatePickerBasicExample, _super);
    function DatePickerBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onDropdownChanged = function (option) {
            _this.setState({
                firstDayOfWeek: DayOfWeek[option.key]
            });
        };
        _this.state = {
            firstDayOfWeek: DayOfWeek.Sunday
        };
        return _this;
    }
    DatePickerBasicExample.prototype.render = function () {
        var firstDayOfWeek = this.state.firstDayOfWeek;
        return (React.createElement("div", null,
            React.createElement(DatePicker, { firstDayOfWeek: firstDayOfWeek, strings: DayPickerStrings, placeholder: 'Select a date...', 
                // tslint:disable:jsx-no-lambda
                onAfterMenuDismiss: function () { return console.log('onAfterMenuDismiss called'); } }),
            React.createElement(Dropdown, { label: 'Select the first day of the week', options: [
                    {
                        text: 'Sunday',
                        key: DayOfWeek[DayOfWeek.Sunday]
                    },
                    {
                        text: 'Monday',
                        key: DayOfWeek[DayOfWeek.Monday]
                    },
                    {
                        text: 'Tuesday',
                        key: DayOfWeek[DayOfWeek.Tuesday]
                    },
                    {
                        text: 'Wednesday',
                        key: DayOfWeek[DayOfWeek.Wednesday]
                    },
                    {
                        text: 'Thursday',
                        key: DayOfWeek[DayOfWeek.Thursday]
                    },
                    {
                        text: 'Friday',
                        key: DayOfWeek[DayOfWeek.Friday]
                    },
                    {
                        text: 'Saturday',
                        key: DayOfWeek[DayOfWeek.Saturday]
                    }
                ], selectedKey: DayOfWeek[firstDayOfWeek], onChanged: this._onDropdownChanged })));
    };
    return DatePickerBasicExample;
}(React.Component));
export { DatePickerBasicExample };
//# sourceMappingURL=DatePicker.Basic.Example.js.map