import * as React from 'react';
import { DatePicker, defaultDayPickerStrings } from '@uifabric/date-time';
import './DatePicker.Examples.scss';
import { addDays } from '@fluentui/date-time-utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { mergeStyleSets } from '@uifabric/styling';
var styles = mergeStyleSets({
    button: { margin: '17px 10px 0 0' },
});
export var 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 = addDays(selectedDate, -1);
            setSelectedDate(newSelectedDate);
        }
    }, [selectedDate]);
    var goNext = React.useCallback(function () {
        if (selectedDate) {
            var newSelectedDate = addDays(selectedDate, 1);
            setSelectedDate(newSelectedDate);
        }
    }, [selectedDate]);
    return (React.createElement("div", { className: "docs-DatePickerExample" },
        React.createElement(DatePicker, { value: selectedDate, onSelectDate: onSelectDate, strings: defaultDayPickerStrings, 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