"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CaptionLabel = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const format_1 = tslib_1.__importDefault(require("date-fns/format"));
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const react_1 = require("react");
const react_day_picker_1 = require("react-day-picker");
function CaptionLabel(props) {
    const { locale, classNames, styles } = (0, react_day_picker_1.useDayPicker)();
    const { onPreviousYearClick, onNextYearClick, onNextMonthClick, onPreviousMonthClick } = props;
    const captionStyles = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, styles.caption_label), { width: '100%' })), []);
    return (React.createElement("div", { key: "caption", className: classNames.caption_label, style: captionStyles, "aria-live": "polite", "aria-atomic": "true" },
        React.createElement(SimpleButton_1.default, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousMonthClick }),
        React.createElement(rebass_1.Flex, { justifyContent: "center", style: { minWidth: 80, flex: 2 } }, (0, format_1.default)(props.displayMonth, 'LLLL', { locale })),
        React.createElement(SimpleButton_1.default, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextMonthClick }),
        React.createElement(SimpleButton_1.default, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousYearClick }),
        React.createElement(rebass_1.Flex, { justifyContent: "center", style: { minWidth: 40, flex: 1 } },
            (0, format_1.default)(props.displayMonth, 'y', { locale }),
            ' '),
        React.createElement(SimpleButton_1.default, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextYearClick })));
}
exports.CaptionLabel = CaptionLabel;
