define(["require", "exports", "react", "@fluentui/react", "@fluentui/style-utilities"], function (require, exports, React, react_1, style_utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.CalendarInlineMultidayDayViewExample = void 0;
    var styles = style_utilities_1.mergeStyleSets({
        wrapper: { height: 360 },
        dropdown: { width: 230 },
    });
    var dayOptions = [
        { key: '1', text: '1' },
        { key: '2', text: '2' },
        { key: '3', text: '3' },
        { key: '4', text: '4' },
        { key: '5', text: '5' },
        { key: '6', text: '6' },
    ];
    var CalendarInlineMultidayDayViewExample = function () {
        var _a = React.useState(), selectedDateRange = _a[0], setSelectedDateRange = _a[1];
        var _b = React.useState(), selectedDate = _b[0], setSelectedDate = _b[1];
        var _c = React.useState(4), daysToSelectInDayView = _c[0], setDaysToSelectInDayView = _c[1];
        var onSelectDate = React.useCallback(function (date, dateRangeArray) {
            setSelectedDate(date);
            setSelectedDateRange(dateRangeArray);
        }, []);
        var onDaysToSelectInDayViewDropdownChange = React.useCallback(function (ev, option) {
            if (option) {
                setDaysToSelectInDayView(Number(option.key));
            }
        }, []);
        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("p", null,
                "This calendar uses ",
                React.createElement("code", null, "dateRangeType = Day"),
                " and ",
                React.createElement("code", null, "daysToSelectInView = 4"),
                "."),
            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, { highlightSelectedMonth: true, showGoToToday: true, onSelectDate: onSelectDate, value: selectedDate, calendarDayProps: { daysToSelectInDayView: daysToSelectInDayView } }),
            React.createElement(react_1.Dropdown, { className: styles.dropdown, selectedKey: String(daysToSelectInDayView), label: "Choose days to select", options: dayOptions, onChange: onDaysToSelectInDayViewDropdownChange })));
    };
    exports.CalendarInlineMultidayDayViewExample = CalendarInlineMultidayDayViewExample;
});
//# sourceMappingURL=Calendar.Inline.MultidayDayView.Example.js.map