define(["require", "exports", "react", "@fluentui/react/lib/Button", "@fluentui/date-time-utilities", "@fluentui/react", "@fluentui/style-utilities"], function (require, exports, React, Button_1, date_time_utilities_1, react_1, style_utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.CalendarInlineWeekSelectionExample = void 0;
    var styles = style_utilities_1.mergeStyleSets({
        wrapper: { height: 360 },
        button: { margin: '17px 10px 0 0' },
    });
    var dateRangeType = react_1.DateRangeType.Week;
    var firstDayOfWeek = react_1.DayOfWeek.Sunday;
    var CalendarInlineWeekSelectionExample = function () {
        var _a = React.useState(), selectedDateRange = _a[0], setSelectedDateRange = _a[1];
        var _b = React.useState(), selectedDate = _b[0], setSelectedDate = _b[1];
        var onSelectDate = React.useCallback(function (date, dateRangeArray) {
            setSelectedDate(date);
            setSelectedDateRange(dateRangeArray);
        }, []);
        var goPrevious = React.useCallback(function () {
            setSelectedDate(function (prevSelectedDate) {
                prevSelectedDate = prevSelectedDate || new Date();
                var dateRangeArray = date_time_utilities_1.getDateRangeArray(prevSelectedDate, dateRangeType, firstDayOfWeek);
                var subtractFrom = new Date(dateRangeArray[0].getFullYear(), dateRangeArray[0].getMonth(), 1);
                var daysToSubtract = 1;
                return date_time_utilities_1.addDays(subtractFrom, -daysToSubtract);
            });
        }, []);
        var goNext = React.useCallback(function () {
            setSelectedDate(function (prevSelectedDate) {
                prevSelectedDate = prevSelectedDate || new Date();
                var dateRangeArray = date_time_utilities_1.getDateRangeArray(prevSelectedDate, dateRangeType, firstDayOfWeek);
                return date_time_utilities_1.addDays(dateRangeArray.pop(), 1);
            });
        }, []);
        var dateRangeString = 'Not set';
        if (selectedDateRange) {
            var rangeStart = selectedDateRange[0];
            var rangeEnd = selectedDateRange[selectedDateRange.length - 1];
            dateRangeString = rangeStart.toLocaleDateString() + '-' + rangeEnd.toLocaleDateString();
        }
        return (React.createElement("div", { className: styles.wrapper },
            React.createElement("div", null,
                "Selected date: ",
                (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleString()) || 'Not set'),
            React.createElement("div", null,
                "Selected range: ",
                dateRangeString),
            React.createElement(react_1.Calendar, { dateRangeType: dateRangeType, highlightSelectedMonth: true, showGoToToday: true, onSelectDate: onSelectDate, value: selectedDate, firstDayOfWeek: firstDayOfWeek }),
            React.createElement("div", null,
                React.createElement(Button_1.DefaultButton, { className: styles.button, onClick: goPrevious, text: "Previous" }),
                React.createElement(Button_1.DefaultButton, { className: styles.button, onClick: goNext, text: "Next" }))));
    };
    exports.CalendarInlineWeekSelectionExample = CalendarInlineWeekSelectionExample;
});
//# sourceMappingURL=Calendar.Inline.WeekSelection.Example.js.map