"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CustomDayPickerCaption = CustomDayPickerCaption;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Icons = require("../Icons");

var _reactDayPicker = require("react-day-picker");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 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) {
  var _useDayPicker = (0, _reactDayPicker.useDayPicker)(),
      classNames = _useDayPicker.classNames,
      styles = _useDayPicker.styles,
      _useDayPicker$labels = _useDayPicker.labels,
      labelPrevious = _useDayPicker$labels.labelPrevious,
      labelNext = _useDayPicker$labels.labelNext,
      locale = _useDayPicker.locale,
      onMonthChange = _useDayPicker.onMonthChange;

  var _useNavigation = (0, _reactDayPicker.useNavigation)(),
      previousMonth = _useNavigation.previousMonth,
      nextMonth = _useNavigation.nextMonth,
      goToMonth = _useNavigation.goToMonth;

  var previousLabel = labelPrevious(previousMonth, {
    locale: locale
  });
  var nextLabel = labelNext(nextMonth, {
    locale: locale
  });

  var handlePreviousClick = function handlePreviousClick() {
    if (!previousMonth) return;
    goToMonth(previousMonth);
    onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(previousMonth);
  };

  var handleNextClick = function handleNextClick() {
    if (!nextMonth) return;
    goToMonth(nextMonth);
    onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: classNames.caption,
    style: styles.caption
  }, /*#__PURE__*/_react.default.createElement("button", {
    "aria-label": previousLabel,
    className: "ds-c-single-input-date-field__nav",
    onClick: handlePreviousClick,
    disabled: !previousMonth
  }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowIcon, {
    direction: "left"
  })), /*#__PURE__*/_react.default.createElement(_reactDayPicker.CaptionDropdowns, {
    displayMonth: props.displayMonth,
    id: props.id
  }), /*#__PURE__*/_react.default.createElement("button", {
    "aria-label": nextLabel,
    className: "ds-c-single-input-date-field__nav",
    onClick: handleNextClick,
    disabled: !nextMonth
  }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowIcon, {
    direction: "right"
  })));
}

var _default = CustomDayPickerCaption;
exports.default = _default;