define(["require", "exports", "tslib", "react", "office-ui-fabric-react", "@uifabric/date-time", "./Calendar.Example.scss"], function (require, exports, tslib_1, React, office_ui_fabric_react_1, date_time_1, styles) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var initialDaysToSelectInDayView = 4;
    var CalendarInlineMultidayDayViewExample = /** @class */ (function (_super) {
        tslib_1.__extends(CalendarInlineMultidayDayViewExample, _super);
        function CalendarInlineMultidayDayViewExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onDaysToSelectInDayViewDropdownChange = function (ev, option) {
                _this.setState(function (prevState) {
                    return tslib_1.__assign(tslib_1.__assign({}, prevState), { daysToSelectInDayView: option && option.key });
                });
            };
            _this._onSelectDate = function (date, dateRangeArray) {
                _this.setState(function (prevState) {
                    return tslib_1.__assign(tslib_1.__assign({}, prevState), { selectedDate: date, selectedDateRange: dateRangeArray });
                });
            };
            _this.state = {
                selectedDate: new Date(),
                selectedDateRange: undefined,
                daysToSelectInDayView: initialDaysToSelectInDayView,
            };
            return _this;
        }
        CalendarInlineMultidayDayViewExample.prototype.render = function () {
            var dateRangeString = null;
            if (this.state.selectedDateRange) {
                var rangeStart = this.state.selectedDateRange[0];
                var rangeEnd = this.state.selectedDateRange[this.state.selectedDateRange.length - 1];
                dateRangeString = rangeStart.toLocaleDateString() + '-' + rangeEnd.toLocaleDateString();
            }
            return (React.createElement("div", { className: styles.wrapper },
                React.createElement("div", null,
                    "Selected date(s):",
                    ' ',
                    React.createElement("span", null, !this.state.selectedDate ? 'Not set' : this.state.selectedDate.toLocaleString())),
                React.createElement("div", null,
                    "Selected dates:",
                    React.createElement("span", null,
                        " ",
                        !dateRangeString ? 'Not set' : dateRangeString)),
                React.createElement(date_time_1.Calendar, { dateRangeType: date_time_1.DateRangeType.Day, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, onSelectDate: this._onSelectDate, value: this.state.selectedDate, firstDayOfWeek: date_time_1.DayOfWeek.Sunday, strings: date_time_1.defaultDayPickerStrings, calendarDayProps: {
                        daysToSelectInDayView: this.state.daysToSelectInDayView,
                    } }),
                React.createElement("div", null,
                    React.createElement(office_ui_fabric_react_1.Dropdown, { className: styles.dropdown, selectedKey: this.state.daysToSelectInDayView && this.state.daysToSelectInDayView, label: "Choose days to select", options: [
                            { key: 1, text: '1' },
                            { key: 2, text: '2' },
                            { key: 3, text: '3' },
                            { key: 4, text: '4' },
                            { key: 5, text: '5' },
                            { key: 6, text: '6' },
                        ], onChange: this._onDaysToSelectInDayViewDropdownChange }))));
        };
        return CalendarInlineMultidayDayViewExample;
    }(React.Component));
    exports.CalendarInlineMultidayDayViewExample = CalendarInlineMultidayDayViewExample;
});
//# sourceMappingURL=Calendar.Inline.MultidayDayView.Example.js.map