import * as React from 'react';
import { Calendar, FocusTrapZone, Callout, DirectionalHint } from '@fluentui/react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { useBoolean } from '@fluentui/react-hooks';
export var CalendarButtonExample = function () {
    var _a = React.useState(), selectedDate = _a[0], setSelectedDate = _a[1];
    var _b = useBoolean(false), showCalendar = _b[0], _c = _b[1], toggleShowCalendar = _c.toggle, hideCalendar = _c.setFalse;
    var buttonContainerRef = React.useRef(null);
    var onSelectDate = React.useCallback(function (date, dateRangeArray) {
        setSelectedDate(date);
        hideCalendar();
    }, [hideCalendar]);
    return (React.createElement("div", null,
        React.createElement("div", { ref: buttonContainerRef },
            React.createElement(DefaultButton, { onClick: toggleShowCalendar, text: !selectedDate ? 'Click for Calendar' : selectedDate.toLocaleDateString() })),
        showCalendar && (React.createElement(Callout, { isBeakVisible: false, gapSpace: 0, doNotLayer: false, target: buttonContainerRef, directionalHint: DirectionalHint.bottomLeftEdge, onDismiss: hideCalendar, setInitialFocus: true },
            React.createElement(FocusTrapZone, { isClickableOutsideFocusTrap: true },
                React.createElement(Calendar, { onSelectDate: onSelectDate, onDismiss: hideCalendar, isMonthPickerVisible: true, value: selectedDate, highlightCurrentMonth: true, isDayPickerVisible: true, showGoToToday: true }))))));
};
//# sourceMappingURL=Calendar.Button.Example.js.map