"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CustomDayPickerCaption = CustomDayPickerCaption;
exports.default = void 0;
var _Icons = require("../Icons");
var _reactDayPicker = require("react-day-picker");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * Implements custom month/year navigation controls and caption for the DayPicker
 * component. Much of this code is copied out of the `react-day-picker` source and
 * then modified to fit our needs.
 */
function CustomDayPickerCaption(props) {
  const {
    classNames,
    styles,
    labels: {
      labelPrevious,
      labelNext
    },
    locale,
    onMonthChange
  } = (0, _reactDayPicker.useDayPicker)();
  const {
    previousMonth,
    nextMonth,
    goToMonth
  } = (0, _reactDayPicker.useNavigation)();
  const previousLabel = labelPrevious(previousMonth, {
    locale
  });
  const nextLabel = labelNext(nextMonth, {
    locale
  });
  const handlePreviousClick = () => {
    if (!previousMonth) return;
    goToMonth(previousMonth);
    onMonthChange?.(previousMonth);
  };
  const handleNextClick = () => {
    if (!nextMonth) return;
    goToMonth(nextMonth);
    onMonthChange?.(nextMonth);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: classNames.caption,
    style: styles.caption,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "aria-label": previousLabel,
      className: "ds-c-single-input-date-field__nav",
      onClick: handlePreviousClick,
      type: "button",
      disabled: !previousMonth,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowIcon, {
        direction: "left"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDayPicker.CaptionDropdowns, {
      displayMonth: props.displayMonth,
      id: props.id
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "aria-label": nextLabel,
      className: "ds-c-single-input-date-field__nav",
      onClick: handleNextClick,
      type: "button",
      disabled: !nextMonth,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ArrowIcon, {
        direction: "right"
      })
    })]
  });
}
var _default = exports.default = CustomDayPickerCaption;