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.
 */
import { jsx as _jsx, jsxs as _jsxs } from "preact/compat/jsx-runtime";
export function CustomDayPickerCaption(props) {
  const {
    classNames,
    styles,
    labels: {
      labelPrevious,
      labelNext
    },
    locale,
    onMonthChange
  } = useDayPicker();
  const {
    previousMonth,
    nextMonth,
    goToMonth
  } = 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__*/_jsxs("div", {
    className: classNames.caption,
    style: styles.caption,
    children: [/*#__PURE__*/_jsx("button", {
      "aria-label": previousLabel,
      className: "ds-c-single-input-date-field__nav",
      onClick: handlePreviousClick,
      type: "button",
      disabled: !previousMonth,
      children: /*#__PURE__*/_jsx(ArrowIcon, {
        direction: "left"
      })
    }), /*#__PURE__*/_jsx(CaptionDropdowns, {
      displayMonth: props.displayMonth,
      id: props.id
    }), /*#__PURE__*/_jsx("button", {
      "aria-label": nextLabel,
      className: "ds-c-single-input-date-field__nav",
      onClick: handleNextClick,
      type: "button",
      disabled: !nextMonth,
      children: /*#__PURE__*/_jsx(ArrowIcon, {
        direction: "right"
      })
    })]
  });
}
export default CustomDayPickerCaption;