import { formatDate } from '@transferwise/formatting';
import { useIntl } from 'react-intl';
import { getFocusableTime } from '../../getFocusableTime/getFocusableTime.mjs';
import TableLink from '../../tableLink/TableLink.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';

const ROWS = 3;
const COLS = 4;
const MONTH_ONLY_FORMAT = {
  month: 'short'
};
const MonthCalendarTable = ({
  selectedDate,
  min,
  max,
  viewYear,
  placeholder,
  onSelect
}) => {
  const {
    locale
  } = useIntl();
  const getLink = month => {
    return /*#__PURE__*/jsx(TableLink, {
      item: month,
      type: "month",
      title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
      active: isActive(month),
      disabled: isDisabled(month),
      today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
      autofocus: autofocusMonth === month,
      onClick: onSelect
    });
  };
  const isActive = month => {
    return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());
  };
  const isThisMonth = month => {
    return viewYear === new Date().getFullYear() && month === new Date().getMonth();
  };
  const isDisabled = month => {
    const date = new Date(viewYear, month);
    return !!(min && date < new Date(min.getFullYear(), min.getMonth()) || max && date > new Date(max.getFullYear(), max.getMonth()));
  };
  const autofocusMonth = (() => {
    const months = Array.from({
      length: ROWS * COLS
    }, (_, index) => index);
    return getFocusableTime({
      isActive,
      isNow: isThisMonth,
      isDisabled,
      timeSpan: months
    });
  })();
  return /*#__PURE__*/jsxs("table", {
    className: "table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0",
    children: [/*#__PURE__*/jsx("thead", {
      className: "sr-only",
      children: /*#__PURE__*/jsx("tr", {
        children: /*#__PURE__*/jsx("th", {
          colSpan: COLS,
          children: placeholder
        })
      })
    }), /*#__PURE__*/jsx("tbody", {
      children: Array.from({
        length: ROWS
      }, (_, rowIndex) => /*#__PURE__*/jsx("tr", {
        children: Array.from({
          length: COLS
        }, (_, colIndex) => /*#__PURE__*/jsx("td", {
          children: getLink(rowIndex * COLS + colIndex)
        }, colIndex))
      }, rowIndex))
    })]
  });
};

export { MonthCalendarTable as default };
//# sourceMappingURL=MonthCalendarTable.mjs.map
