import * as React from 'react';
import { DatePicker, addDays, mergeStyleSets } from '@fluentui/react';
import { DefaultButton } from '@fluentui/react/lib/Button';
var styles = mergeStyleSets({
    root: { maxWidth: 300, selectors: { '> *': { marginBottom: 15 } } },
    button: { marginRight: 10 },
});
export var DatePickerExternalControlsExample = function () {
    var _a = React.useState(new Date()), selectedDate = _a[0], setSelectedDate = _a[1];
    var goPrevious = React.useCallback(function () {
        setSelectedDate(function (prevSelectedDate) { return (prevSelectedDate ? addDays(prevSelectedDate, -1) : undefined); });
    }, []);
    var goNext = React.useCallback(function () {
        setSelectedDate(function (prevSelectedDate) { return (prevSelectedDate ? addDays(prevSelectedDate, 1) : undefined); });
    }, []);
    return (React.createElement("div", { className: styles.root },
        React.createElement(DatePicker, { value: selectedDate, onSelectDate: setSelectedDate, placeholder: "Select a date...", ariaLabel: "Select a date" }),
        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=DatePicker.ExternalControls.Example.js.map