import { __extends } from "tslib";
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react';
import { addDays, getDateRangeArray } from '@fluentui/date-time-utilities';
import { Calendar, DateRangeType, DayOfWeek, defaultDayPickerStrings } from '@uifabric/date-time';
import * as styles from './Calendar.Example.scss';
var dateRangeType = DateRangeType.Week;
var CalendarInlineWeekSelectionExample = /** @class */ (function (_super) {
    __extends(CalendarInlineWeekSelectionExample, _super);
    function CalendarInlineWeekSelectionExample(props) {
        var _this = _super.call(this, props) || this;
        _this._goPrevious = function () {
            _this.setState(function (prevState) {
                var selectedDate = prevState.selectedDate || new Date();
                var dateRangeArray = getDateRangeArray(selectedDate, dateRangeType, DayOfWeek.Sunday);
                var subtractFrom = dateRangeArray[0];
                var daysToSubtract = dateRangeArray.length;
                var newSelectedDate = addDays(subtractFrom, -daysToSubtract);
                return {
                    selectedDate: newSelectedDate,
                };
            });
        };
        _this._goNext = function () {
            _this.setState(function (prevState) {
                var selectedDate = prevState.selectedDate || new Date();
                var dateRangeArray = getDateRangeArray(selectedDate, dateRangeType, DayOfWeek.Sunday);
                var newSelectedDate = addDays(dateRangeArray.pop(), 1);
                return {
                    selectedDate: newSelectedDate,
                };
            });
        };
        _this._onSelectDate = function (date, dateRangeArray) {
            _this.setState(function (prevState) {
                return {
                    selectedDate: date,
                    selectedDateRange: dateRangeArray,
                };
            });
        };
        _this.state = {
            selectedDate: new Date(),
            selectedDateRange: undefined,
        };
        return _this;
    }
    CalendarInlineWeekSelectionExample.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(Calendar, { dateRangeType: dateRangeType, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, onSelectDate: this._onSelectDate, value: this.state.selectedDate, firstDayOfWeek: DayOfWeek.Sunday, strings: defaultDayPickerStrings }),
            React.createElement("div", null,
                React.createElement(DefaultButton, { className: styles.button, onClick: this._goPrevious, text: "Previous" }),
                React.createElement(DefaultButton, { className: styles.button, onClick: this._goNext, text: "Next" }))));
    };
    return CalendarInlineWeekSelectionExample;
}(React.Component));
export { CalendarInlineWeekSelectionExample };
//# sourceMappingURL=Calendar.Inline.WeekSelection.Example.js.map