"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var date_time_1 = require("@uifabric/date-time");
require("./DatePicker.Examples.scss");
var date_time_utilities_1 = require("@fluentui/date-time-utilities");
var Button_1 = require("office-ui-fabric-react/lib-commonjs/Button");
var styling_1 = require("@uifabric/styling");
var styles = styling_1.mergeStyleSets({
    button: { margin: '17px 10px 0 0' },
});
exports.DatePickerExternalControlsExample = function () {
    var _a = React.useState(new Date()), selectedDate = _a[0], setSelectedDate = _a[1];
    var onSelectDate = React.useCallback(function (date) {
        setSelectedDate(date || undefined);
    }, []);
    var goPrevious = React.useCallback(function () {
        if (selectedDate) {
            var newSelectedDate = date_time_utilities_1.addDays(selectedDate, -1);
            setSelectedDate(newSelectedDate);
        }
    }, [selectedDate]);
    var goNext = React.useCallback(function () {
        if (selectedDate) {
            var newSelectedDate = date_time_utilities_1.addDays(selectedDate, 1);
            setSelectedDate(newSelectedDate);
        }
    }, [selectedDate]);
    return (React.createElement("div", { className: "docs-DatePickerExample" },
        React.createElement(date_time_1.DatePicker, { value: selectedDate, onSelectDate: onSelectDate, strings: date_time_1.defaultDayPickerStrings, 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" }))));
};
//# sourceMappingURL=DatePicker.ExternalControls.Example.js.map