import React, { forwardRef, useState } from "react";
import { useId } from "../../utils-external/index.js";
import { cl } from "../../utils/helpers/index.js";
import { consoleWarning } from "../../utils/helpers/consoleWarning.js";
import { useControllableState, useMergeRefs } from "../../utils/hooks/index.js";
import { useDateLocale, useI18n } from "../../utils/i18n/i18n.hooks.js";
import { DateDialog } from "../Date.Dialog.js";
import { DateInputContextProvider, MonthPickerInput, } from "../Date.Input.js";
import { DateTranslationContextProvider, getLocaleFromString, getTranslations, } from "../Date.locale.js";
import { MonthPickerProvider } from "./MonthPicker.context.js";
import { MonthPickerCaption } from "./parts/MonthPicker.Caption.js";
import { MonthPickerStandalone, } from "./parts/MonthPicker.Standalone.js";
import { MonthPickerTable } from "./parts/MonthPicker.Table.js";
/**
 * A component that displays a month picker.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/monthpicker)
 * @see 🏷️ {@link MonthPickerProps}
 *
 * @example
 * ```jsx
 *  const { inputProps, monthpickerProps } = useMonthpicker({
 *    onMonthChange: console.log,
 *  });
 *
 *  return (
 *     <MonthPicker {...monthpickerProps} dropdownCaption>
 *       <MonthPicker.Input
 *         {...inputProps}
 *         label="Velg måned"
 *       />
 *     </MonthPicker>
 *  );
 * ```
 */
export const MonthPicker = forwardRef(({ children, dropdownCaption = false, fromDate, toDate, disabled = [], selected, open: _open, id, onClose, onOpenToggle, locale, translations, onMonthSelect, className, wrapperClassName, defaultSelected, year, onYearChange, strategy = "absolute", }, ref) => {
    const translate = useI18n("DatePicker", translations, getTranslations(locale));
    const langProviderLocale = useDateLocale();
    const ariaId = useId(id);
    const popupLabelId = useId();
    const [open, setOpen] = useControllableState({
        defaultValue: false,
        value: _open,
        onChange: () => {
            onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
        },
    });
    /* We use state here to insure that anchor is defined if open is true on initial render */
    const [wrapperRef, setWrapperRef] = useState(null);
    const mergedRef = useMergeRefs(setWrapperRef, ref);
    const handleSelect = (month) => {
        onMonthSelect === null || onMonthSelect === void 0 ? void 0 : onMonthSelect(month);
        if (month) {
            onClose === null || onClose === void 0 ? void 0 : onClose();
            setOpen(false);
        }
    };
    if (dropdownCaption && (!fromDate || !toDate)) {
        consoleWarning("MonthPicker: Using dropdownCaption requires `fromDate` and `toDate` props to be defined.");
        return null;
    }
    return (React.createElement(DateTranslationContextProvider, { translate: translate },
        React.createElement(DateInputContextProvider, { open: open, onOpen: () => setOpen((x) => !x), ariaId: ariaId, defined: true, caller: null },
            React.createElement(MonthPickerProvider, { dropdownCaption: dropdownCaption, defaultSelected: defaultSelected, selected: selected, disabled: disabled, fromDate: fromDate, toDate: toDate, year: year, onYearChange: onYearChange, onMonthSelect: handleSelect, locale: locale ? getLocaleFromString(locale) : langProviderLocale },
                React.createElement("div", { ref: mergedRef, className: cl("aksel-date__wrapper", wrapperClassName) },
                    children,
                    React.createElement(DateDialog, { open: open, anchor: wrapperRef, onClose: () => {
                            onClose === null || onClose === void 0 ? void 0 : onClose();
                            open && setOpen(false);
                        }, locale: locale, translate: translate, variant: "month", popoverProps: {
                            id: ariaId,
                            strategy,
                        }, popupLabelId: popupLabelId },
                        React.createElement("div", { className: cl("rdp-month", className) },
                            React.createElement(MonthPickerCaption, { popupLabelId: popupLabelId }),
                            React.createElement(MonthPickerTable, null))))))));
});
MonthPicker.Standalone = MonthPickerStandalone;
MonthPicker.Input = MonthPickerInput;
export default MonthPicker;
export { MonthPickerStandalone, MonthPickerInput };
//# sourceMappingURL=MonthPicker.js.map