import React from 'react';
import { ArrowIcon } from '../Icons';
import { CaptionDropdowns, useDayPicker, useNavigation } from 'react-day-picker';
/**
 * 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.
 */

export function CustomDayPickerCaption(props) {
  var _useDayPicker = 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 = 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.createElement("div", {
    className: classNames.caption,
    style: styles.caption
  }, /*#__PURE__*/React.createElement("button", {
    "aria-label": previousLabel,
    className: "ds-c-single-input-date-field__nav",
    onClick: handlePreviousClick,
    disabled: !previousMonth
  }, /*#__PURE__*/React.createElement(ArrowIcon, {
    direction: "left"
  })), /*#__PURE__*/React.createElement(CaptionDropdowns, {
    displayMonth: props.displayMonth,
    id: props.id
  }), /*#__PURE__*/React.createElement("button", {
    "aria-label": nextLabel,
    className: "ds-c-single-input-date-field__nav",
    onClick: handleNextClick,
    disabled: !nextMonth
  }, /*#__PURE__*/React.createElement(ArrowIcon, {
    direction: "right"
  })));
}
export default CustomDayPickerCaption;