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