import { __extends } from "tslib";
import * as React from 'react';
import { WeeklyDayPicker, DayOfWeek, addDays, defaultWeeklyDayPickerStrings } from '@uifabric/date-time';
import * as styles from './WeeklyDayPicker.Example.scss';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
var WeeklyDayPickerInlineExpandableExample = /** @class */ (function (_super) {
    __extends(WeeklyDayPickerInlineExpandableExample, _super);
    function WeeklyDayPickerInlineExpandableExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onSelectDate = function (date) {
            _this.setState(function (prevState) {
                return {
                    selectedDate: date,
                };
            });
        };
        _this._goPrevious = function () {
            if (_this.state && _this.state.selectedDate) {
                _this._onSelectDate(addDays(_this.state.selectedDate, -1));
            }
        };
        _this._goNext = function () {
            if (_this.state && _this.state.selectedDate) {
                _this._onSelectDate(addDays(_this.state.selectedDate, 1));
            }
        };
        _this._expand = function () {
            _this.setState({
                expanded: !_this.state.expanded,
            });
        };
        _this.state = {
            selectedDate: new Date(),
            expanded: false,
        };
        return _this;
    }
    WeeklyDayPickerInlineExpandableExample.prototype.render = function () {
        return (React.createElement("div", { className: styles.wrapper },
            React.createElement("div", null,
                "Selected date(s):",
                ' ',
                React.createElement("span", null, !this.state.selectedDate ? 'Not set' : this.state.selectedDate.toLocaleString())),
            React.createElement("div", null,
                React.createElement(DefaultButton, { className: styles.button, onClick: this._expand, text: "Expand/collapse", "aria-expanded": this.state.expanded })),
            React.createElement(WeeklyDayPicker, { weeksToShow: 6, onSelectDate: this._onSelectDate, firstDayOfWeek: DayOfWeek.Sunday, strings: defaultWeeklyDayPickerStrings, initialDate: this.state.selectedDate, showFullMonth: this.state.expanded }),
            React.createElement("div", null,
                React.createElement(DefaultButton, { className: styles.button, onClick: this._goPrevious, text: "Previous" }),
                React.createElement(DefaultButton, { className: styles.button, onClick: this._goNext, text: "Next" }))));
    };
    return WeeklyDayPickerInlineExpandableExample;
}(React.Component));
export { WeeklyDayPickerInlineExpandableExample };
//# sourceMappingURL=WeeklyDayPicker.Inline.Expandable.Example.js.map