import Button from "../Button/Button";
import Choice from "../ChoiceList/Choice";
import classNames from 'classnames';
import describeField from "../utilities/describeField";
import useId from "../utilities/useId";
import { useState } from "preact/compat";
import { Label } from "../Label";
import { NUM_MONTHS, getMonthNames } from "./getMonthNames";
import { fallbackLocale, getLanguage, t } from "../i18n";
import { useLabelProps } from "../Label/useLabelProps";
import { useHint } from "../Hint/useHint";
import { useInlineError } from "../InlineError/useInlineError";
import { jsx as _jsx } from "preact/compat/jsx-runtime";
import { jsxs as _jsxs } from "preact/compat/jsx-runtime";
const monthNumbers = (() => {
  const months = [];
  for (let m = 1; m <= 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/).
 */
export const MonthPicker = props => {
  const id = useId('month-picker--', props.id);
  const locale = fallbackLocale(getLanguage(), 'US');
  const months = getMonthNames(locale);
  const monthsLong = getMonthNames(locale, false);
  const isControlled = props.selectedMonths !== undefined;
  const [selectedMonthsState, setSelectedMonthsState] = 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 === NUM_MONTHS - disabledMonths.length;
  const clearAllPressed = selectedMonths.length === 0;
  const {
    errorId,
    topError,
    bottomError,
    invalid
  } = useInlineError({
    ...props,
    id
  });
  const {
    hintId,
    hintElement
  } = useHint({
    ...props,
    id
  });
  const labelProps = useLabelProps({
    ...props,
    id
  });
  return /*#__PURE__*/_jsxs("fieldset", {
    "aria-invalid": invalid,
    "aria-describedby": describeField({
      ...props,
      hintId,
      errorId
    }),
    className: classNames('ds-c-fieldset', 'ds-c-month-picker', props.className),
    children: [/*#__PURE__*/_jsx(Label, {
      component: "legend",
      ...labelProps
    }), hintElement, topError, /*#__PURE__*/_jsxs("div", {
      className: "ds-c-month-picker__buttons ds-u-clearfix",
      children: [/*#__PURE__*/_jsx(Button, {
        "aria-pressed": selectAllPressed,
        size: "small",
        className: "ds-c-month-picker__button",
        onClick: handleSelectAll,
        onDark: props.inversed,
        variation: props.buttonVariation,
        children: props.selectAllText ?? t('monthPicker.selectAllText')
      }), /*#__PURE__*/_jsx(Button, {
        "aria-pressed": clearAllPressed,
        size: "small",
        className: "ds-c-month-picker__button",
        onClick: handleClearAll,
        onDark: props.inversed,
        variation: props.buttonVariation,
        children: props.clearAllText ?? t('monthPicker.clearAllText')
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: "ds-c-month-picker__months",
      children: /*#__PURE__*/_jsx("ol", {
        role: "list",
        className: "ds-c-list--bare ds-c-month-picker__months-list",
        children: months.map((month, i) => /*#__PURE__*/_jsx("li", {
          children: /*#__PURE__*/_jsx(Choice, {
            "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]
  });
};
export default MonthPicker;