"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerWeekNumbersExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var days = [
    { text: 'Sunday', key: react_1.DayOfWeek.Sunday },
    { text: 'Monday', key: react_1.DayOfWeek.Monday },
    { text: 'Tuesday', key: react_1.DayOfWeek.Tuesday },
    { text: 'Wednesday', key: react_1.DayOfWeek.Wednesday },
    { text: 'Thursday', key: react_1.DayOfWeek.Thursday },
    { text: 'Friday', key: react_1.DayOfWeek.Friday },
    { text: 'Saturday', key: react_1.DayOfWeek.Saturday },
];
var rootClass = react_1.mergeStyles({ maxWidth: 300, selectors: { '> *': { marginBottom: 15 } } });
var DatePickerWeekNumbersExample = function () {
    var _a = React.useState(react_1.DayOfWeek.Sunday), firstDayOfWeek = _a[0], setFirstDayOfWeek = _a[1];
    var onDropdownChange = React.useCallback(function (event, option) {
        setFirstDayOfWeek(react_1.DayOfWeek[option.key]);
    }, []);
    return (React.createElement("div", { className: rootClass },
        React.createElement(react_1.DatePicker, { firstDayOfWeek: firstDayOfWeek, showWeekNumbers: true, firstWeekOfYear: 1, showMonthPickerAsOverlay: true, placeholder: "Select a date...", ariaLabel: "Select a date" }),
        React.createElement(react_1.Dropdown, { label: "Select the first day of the week", options: days, selectedKey: firstDayOfWeek, onChange: onDropdownChange })));
};
exports.DatePickerWeekNumbersExample = DatePickerWeekNumbersExample;
//# sourceMappingURL=DatePicker.WeekNumbers.Example.js.map