import { __extends } from "tslib";
import * as React from 'react';
import { DefaultButton, FocusTrapZone, Callout, DirectionalHint } from 'office-ui-fabric-react';
import { Calendar, DayOfWeek, defaultDayPickerStrings } from '@uifabric/date-time';
var CalendarButtonExample = /** @class */ (function (_super) {
    __extends(CalendarButtonExample, _super);
    function CalendarButtonExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onClick = function () {
            _this.setState(function (prevState) {
                prevState.showCalendar = !prevState.showCalendar;
                return prevState;
            });
        };
        _this._onDismiss = function () {
            _this.setState(function (prevState) {
                prevState.showCalendar = false;
                return prevState;
            });
        };
        _this._onSelectDate = function (date) {
            _this.setState(function (prevState) {
                prevState.showCalendar = false;
                prevState.selectedDate = date;
                return prevState;
            });
        };
        _this.state = {
            showCalendar: false,
            selectedDate: undefined,
        };
        return _this;
    }
    CalendarButtonExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("div", { ref: function (calendarBtn) { return (_this._calendarButtonElement = calendarBtn); } },
                React.createElement(DefaultButton, { onClick: this._onClick, text: !this.state.selectedDate ? this.props.buttonString : this.state.selectedDate.toLocaleDateString() })),
            this.state.showCalendar && (React.createElement(Callout, { isBeakVisible: false, className: "ms-DatePicker-callout", gapSpace: 0, doNotLayer: false, target: this._calendarButtonElement, directionalHint: DirectionalHint.bottomLeftEdge, onDismiss: this._onDismiss, setInitialFocus: true },
                React.createElement(FocusTrapZone, { isClickableOutsideFocusTrap: true },
                    React.createElement(Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._onDismiss, isMonthPickerVisible: this.props.isMonthPickerVisible, value: this.state.selectedDate, firstDayOfWeek: DayOfWeek.Sunday, strings: defaultDayPickerStrings, isDayPickerVisible: this.props.isDayPickerVisible, highlightCurrentMonth: this.props.highlightCurrentMonth, highlightSelectedMonth: this.props.highlightSelectedMonth, showMonthPickerAsOverlay: this.props.showMonthPickerAsOverlay, showGoToToday: this.props.showGoToToday }))))));
    };
    CalendarButtonExample.defaultProps = {
        showMonthPickerAsOverlay: false,
        isDayPickerVisible: true,
        isMonthPickerVisible: true,
        showGoToToday: true,
        buttonString: 'Click for Calendar',
    };
    return CalendarButtonExample;
}(React.Component));
export { CalendarButtonExample };
//# sourceMappingURL=Calendar.Button.Example.js.map