"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerExternalControlsExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var styles = react_1.mergeStyleSets({
    root: { maxWidth: 300, selectors: { '> *': { marginBottom: 15 } } },
    button: { marginRight: 10 },
});
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 ? react_1.addDays(prevSelectedDate, -1) : undefined); });
    }, []);
    var goNext = React.useCallback(function () {
        setSelectedDate(function (prevSelectedDate) { return (prevSelectedDate ? react_1.addDays(prevSelectedDate, 1) : undefined); });
    }, []);
    return (React.createElement("div", { className: styles.root },
        React.createElement(react_1.DatePicker, { value: selectedDate, onSelectDate: setSelectedDate, placeholder: "Select a date...", ariaLabel: "Select a date" }),
        React.createElement("div", null,
            React.createElement(Button_1.DefaultButton, { className: styles.button, onClick: goPrevious, text: "Previous" }),
            React.createElement(Button_1.DefaultButton, { className: styles.button, onClick: goNext, text: "Next" }))));
};
exports.DatePickerExternalControlsExample = DatePickerExternalControlsExample;
//# sourceMappingURL=DatePicker.ExternalControls.Example.js.map