"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.MonthPicker = void 0;
var _Button = _interopRequireDefault(require("../Button/Button"));
var _Choice = _interopRequireDefault(require("../ChoiceList/Choice"));
var _classnames = _interopRequireDefault(require("classnames"));
var _describeField = _interopRequireDefault(require("../utilities/describeField"));
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _compat = require("preact/compat");
var _Label = require("../Label");
var _getMonthNames = require("./getMonthNames");
var _i18n = require("../i18n");
var _useLabelProps = require("../Label/useLabelProps");
var _useHint = require("../Hint/useHint");
var _useInlineError = require("../InlineError/useInlineError");
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const monthNumbers = (() => {
  const months = [];
  for (let m = 1; m <= _getMonthNames.NUM_MONTHS; m++) {
    months.push(m);
  }
  return months;
})();
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/month-picker/).
 */
const MonthPicker = props => {
  const id = (0, _useId.default)('month-picker--', props.id);
  const locale = (0, _i18n.fallbackLocale)((0, _i18n.getLanguage)(), 'US');
  const months = (0, _getMonthNames.getMonthNames)(locale);
  const monthsLong = (0, _getMonthNames.getMonthNames)(locale, false);
  const isControlled = props.selectedMonths !== undefined;
  const [selectedMonthsState, setSelectedMonthsState] = (0, _compat.useState)(props.defaultSelectedMonths ?? []);
  const selectedMonths = isControlled ? props.selectedMonths : selectedMonthsState;
  const disabledMonths = props.disabledMonths ?? [];
  function handleChange(event) {
    if (props.onChange) {
      props.onChange(event);
    }
    if (!isControlled) {
      const month = parseInt(event.target.value);
      const newSelectedMonths = selectedMonths.slice();
      if (newSelectedMonths.includes(month)) {
        newSelectedMonths.splice(newSelectedMonths.indexOf(month), 1);
      } else {
        newSelectedMonths.push(month);
      }
      setSelectedMonthsState(newSelectedMonths);
    }
  }
  function handleSelectAll() {
    if (props.onSelectAll) {
      props.onSelectAll();
    }
    if (!isControlled) {
      setSelectedMonthsState(monthNumbers.filter(m => !disabledMonths.includes(m)));
    }
  }
  function handleClearAll() {
    if (props.onClearAll) {
      props.onClearAll();
    }
    if (!isControlled) {
      setSelectedMonthsState([]);
    }
  }
  const selectAllPressed = selectedMonths.length === _getMonthNames.NUM_MONTHS - disabledMonths.length;
  const clearAllPressed = selectedMonths.length === 0;
  const {
    errorId,
    topError,
    bottomError,
    invalid
  } = (0, _useInlineError.useInlineError)({
    ...props,
    id
  });
  const {
    hintId,
    hintElement
  } = (0, _useHint.useHint)({
    ...props,
    id
  });
  const labelProps = (0, _useLabelProps.useLabelProps)({
    ...props,
    id
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    "aria-invalid": invalid,
    "aria-describedby": (0, _describeField.default)({
      ...props,
      hintId,
      errorId
    }),
    className: (0, _classnames.default)('ds-c-fieldset', 'ds-c-month-picker', props.className),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
      component: "legend",
      ...labelProps
    }), hintElement, topError, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "ds-c-month-picker__buttons ds-u-clearfix",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        "aria-pressed": selectAllPressed,
        size: "small",
        className: "ds-c-month-picker__button",
        onClick: handleSelectAll,
        onDark: props.inversed,
        variation: props.buttonVariation,
        children: props.selectAllText ?? (0, _i18n.t)('monthPicker.selectAllText')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        "aria-pressed": clearAllPressed,
        size: "small",
        className: "ds-c-month-picker__button",
        onClick: handleClearAll,
        onDark: props.inversed,
        variation: props.buttonVariation,
        children: props.clearAllText ?? (0, _i18n.t)('monthPicker.clearAllText')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "ds-c-month-picker__months",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
        role: "list",
        className: "ds-c-list--bare ds-c-month-picker__months-list",
        children: months.map((month, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.default, {
            "aria-label": monthsLong[i],
            checked: selectedMonths.includes(i + 1),
            className: "ds-c-month-picker__month",
            disabled: disabledMonths.includes(i + 1),
            inversed: props.inversed,
            onChange: handleChange,
            name: props.name,
            type: "checkbox",
            value: i + 1,
            label: month,
            id: `${id}__choice--${i + 1}`
          })
        }, month))
      })
    }), bottomError]
  });
};
exports.MonthPicker = MonthPicker;
var _default = MonthPicker;
exports.default = _default;