import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { addDays, getDateRangeArray } from '@fluentui/date-time-utilities';
import { Calendar, DateRangeType, DayOfWeek } from '@fluentui/react';
import { mergeStyleSets } from '@fluentui/style-utilities';
var styles = mergeStyleSets({
    wrapper: { height: 360 },
    button: { margin: '17px 10px 0 0' },
});
var dateRangeType = DateRangeType.Week;
var firstDayOfWeek = DayOfWeek.Sunday;
export 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 = getDateRangeArray(prevSelectedDate, dateRangeType, firstDayOfWeek);
            var subtractFrom = new Date(dateRangeArray[0].getFullYear(), dateRangeArray[0].getMonth(), 1);
            var daysToSubtract = 1;
            return addDays(subtractFrom, -daysToSubtract);
        });
    }, []);
    var goNext = React.useCallback(function () {
        setSelectedDate(function (prevSelectedDate) {
            prevSelectedDate = prevSelectedDate || new Date();
            var dateRangeArray = getDateRangeArray(prevSelectedDate, dateRangeType, firstDayOfWeek);
            return 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(Calendar, { dateRangeType: dateRangeType, highlightSelectedMonth: true, showGoToToday: true, onSelectDate: onSelectDate, value: selectedDate, firstDayOfWeek: firstDayOfWeek }),
        React.createElement("div", null,
            React.createElement(DefaultButton, { className: styles.button, onClick: goPrevious, text: "Previous" }),
            React.createElement(DefaultButton, { className: styles.button, onClick: goNext, text: "Next" }))));
};
//# sourceMappingURL=Calendar.Inline.WeekSelection.Example.js.map