"use strict";
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const isMobile = require("is-mobile");
const assert = require("assert");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_Column_Column_cjs = require("../Column/Column.cjs");
const styles_lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
const styles_lib_components_Dropdown_Dropdown_cjs = require("../Dropdown/Dropdown.cjs");
const styles_lib_components_private_Field_Field_cjs = require("../private/Field/Field.cjs");
const styles_lib_components_Secondary_Secondary_cjs = require("../Secondary/Secondary.cjs");
const styles_lib_components_Strong_Strong_cjs = require("../Strong/Strong.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const styles_lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
const styles_lib_components_MonthPicker_MonthPicker_css_cjs = require("./MonthPicker.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const FieldLabel = ({
  id,
  htmlFor,
  label,
  disabled,
  secondaryLabel,
  tertiaryLabel,
  description,
  descriptionId,
  data
}) => {
  if (!label && !description) {
    return null;
  }
  const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: disabled ? "secondary" : void 0, children: [
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Strong_Strong_cjs.Strong, { children: label }),
    secondaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Secondary_Secondary_cjs.Secondary, { children: [
      " (",
      secondaryLabel,
      ")"
    ] }) : null
  ] });
  return /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space: "xsmall", data, children: [
    label ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Box_Box_cjs.Box, { component: "span", display: "flex", justifyContent: "spaceBetween", children: [
      htmlFor === false ? labelEl : /* @__PURE__ */ jsxRuntime.jsx("label", { id, htmlFor, children: labelEl }),
      tertiaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Accordion_AccordionItem_cjs.Text, { children: [
        " ",
        tertiaryLabel
      ] }) : null
    ] }) : null,
    description ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingTop: label ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
  ] });
};
const tones = ["neutral", "critical", "positive", "caution"];
const icon = {
  critical: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconCritical, { tone: "critical" }),
  positive: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconPositive, { tone: "positive" }),
  caution: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconCaution, { tone: "caution" })
};
const FieldMessage = ({
  id,
  tone = "neutral",
  message,
  secondaryMessage,
  reserveMessageSpace = true,
  disabled,
  data,
  ...restProps
}) => {
  if (tones.indexOf(tone) === -1) {
    throw new Error(`Invalid tone: ${tone}`);
  }
  if (!message && !secondaryMessage && !reserveMessageSpace) {
    return null;
  }
  const showMessage = !disabled && message;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    styles_lib_components_Box_Box_cjs.Box,
    {
      id,
      display: "flex",
      justifyContent: "flexEnd",
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { flexGrow: 1, userSelect: showMessage ? void 0 : "none", children: /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Accordion_AccordionItem_cjs.Text,
          {
            size: "small",
            tone: tone === "neutral" ? "secondary" : tone,
            icon: showMessage && tone !== "neutral" ? icon[tone] : void 0,
            children: showMessage ? message : " "
          }
        ) }),
        secondaryMessage && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingLeft: "xsmall", flexGrow: 0, children: secondaryMessage }) : null
      ]
    }
  );
};
const mergeIds = (...ids) => {
  const validIds = ids.filter(Boolean);
  if (validIds.length === 0) {
    return void 0;
  }
  return validIds.join(" ");
};
const FieldGroup = ({
  id,
  disabled,
  children,
  secondaryLabel,
  tertiaryLabel,
  description,
  message,
  reserveMessageSpace = false,
  tone,
  required,
  role,
  space = "xsmall",
  data,
  ...restProps
}) => {
  const labelId = `${id}-label`;
  const messageId = `${id}-message`;
  const descriptionId = description ? `${id}-description` : void 0;
  let ariaLabelledBy;
  let ariaLabel;
  if ("label" in restProps && restProps.label) {
    ariaLabelledBy = labelId;
  } else if ("aria-labelledby" in restProps && restProps["aria-labelledby"]) {
    ariaLabelledBy = restProps["aria-labelledby"];
  } else if ("aria-label" in restProps && restProps["aria-label"]) {
    ariaLabel = restProps["aria-label"];
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component: "fieldset",
      disabled,
      id,
      role,
      "aria-labelledby": ariaLabelledBy,
      "aria-label": ariaLabel,
      "aria-required": required,
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space, children: [
        "label" in restProps && restProps.label || description ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "legend", id: labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
          FieldLabel,
          {
            htmlFor: false,
            label: "label" in restProps ? restProps.label : void 0,
            secondaryLabel,
            tertiaryLabel,
            disabled,
            description,
            descriptionId
          }
        ) }) : null,
        children({
          disabled,
          "aria-describedby": mergeIds(
            message ? messageId : void 0,
            descriptionId
          )
        }),
        message || reserveMessageSpace ? /* @__PURE__ */ jsxRuntime.jsx(
          FieldMessage,
          {
            id: messageId,
            tone,
            disabled,
            message,
            reserveMessageSpace
          }
        ) : null
      ] })
    }
  );
};
const defaultMonthNames = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
];
const getMonths = (monthNames) => monthNames.map((monthName, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i + 1, children: monthName }, i));
const getYears = (min, max, ascending) => [...new Array(max - min + 1)].map((_v, i) => {
  const yearStr = String(ascending ? i + min : max - i);
  return /* @__PURE__ */ jsxRuntime.jsx("option", { value: yearStr, children: yearStr }, yearStr);
});
const currYear = (/* @__PURE__ */ new Date()).getFullYear();
const renderNativeInput = isMobile.isMobile({ tablet: true });
const customValueToString = ({ month, year }) => month && year ? `${year}-${month < 10 ? "0" : ""}${month}` : void 0;
const stringToCustomValue = (value) => {
  const [year, month] = value.split("-");
  return {
    month: parseInt(month, 10),
    year: parseInt(year, 10)
  };
};
const makeChangeHandler = (onChange, value, fieldType) => (event) => {
  if (typeof onChange === "function") {
    onChange(
      {
        month: {
          year: value && value.year ? value.year : void 0,
          month: parseInt(event.target.value, 10) || void 0
        },
        year: {
          month: value && value.month ? value.month : void 0,
          year: parseInt(event.target.value, 10) || void 0
        },
        native: stringToCustomValue(event.target.value)
      }[fieldType]
    );
  }
};
const MonthPicker = ({
  id,
  value,
  onChange,
  onBlur,
  onFocus,
  tone,
  disabled,
  minYear = currYear - 100,
  maxYear = currYear,
  ascendingYears = false,
  monthLabel = "Month",
  yearLabel = "Year",
  monthNames = defaultMonthNames,
  ...restProps
}) => {
  assert__default.default(monthNames.length === 12, "monthNames array must contain 12 items");
  const currentValue = {
    month: value && value.month ? value.month : void 0,
    year: value && value.year ? value.year : void 0
  };
  const monthRef = React.createRef();
  const yearRef = React.createRef();
  const monthId = `${id}-month`;
  const yearId = `${id}-year`;
  const blurHandler = onBlur ? (event) => {
    const fireIfExternal = (element) => {
      if (element !== monthRef.current && element !== yearRef.current) {
        onBlur();
      }
    };
    if (event.relatedTarget !== null) {
      fireIfExternal(event.relatedTarget);
    } else {
      setTimeout(() => {
        fireIfExternal(document.activeElement);
      });
    }
  } : void 0;
  const focusHandler = onFocus ? (event) => {
    if (event.relatedTarget !== monthRef.current && event.relatedTarget !== yearRef.current) {
      onFocus();
    }
  } : void 0;
  const nativeField = /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_private_Field_Field_cjs.Field,
    {
      id,
      tone,
      disabled,
      value: customValueToString(currentValue),
      ...restProps,
      icon: void 0,
      prefix: void 0,
      name: void 0,
      autoComplete: void 0,
      secondaryMessage: null,
      children: (overlays, { className, ...fieldProps }) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component: "input",
            type: "month",
            value: customValueToString(currentValue),
            onChange: onChange && makeChangeHandler(onChange, value, "native"),
            onBlur,
            onFocus,
            ...fieldProps,
            height: "touchable",
            className: [className, styles_lib_components_MonthPicker_MonthPicker_css_cjs.nativeInput]
          }
        ),
        overlays
      ] })
    }
  );
  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Columns_Columns_cjs.Columns, { space: "small", children: [
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Dropdown_Dropdown_cjs.Dropdown,
      {
        id: monthId,
        value: currentValue.month || "",
        onChange: makeChangeHandler(onChange, value, "month"),
        onBlur: blurHandler,
        onFocus: focusHandler,
        tone,
        placeholder: monthLabel,
        "aria-label": monthLabel,
        ...fieldGroupProps,
        ref: monthRef,
        children: getMonths(monthNames)
      }
    ) }),
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Dropdown_Dropdown_cjs.Dropdown,
      {
        id: yearId,
        value: currentValue.year || "",
        onChange: makeChangeHandler(onChange, value, "year"),
        onBlur: blurHandler,
        onFocus: focusHandler,
        tone,
        placeholder: yearLabel,
        "aria-label": yearLabel,
        ...fieldGroupProps,
        ref: yearRef,
        children: getYears(minYear, maxYear, ascendingYears)
      }
    ) })
  ] }) });
  return renderNativeInput ? nativeField : customFieldGroup;
};
MonthPicker.displayName = "MonthPicker";
exports.FieldGroup = FieldGroup;
exports.FieldLabel = FieldLabel;
exports.FieldMessage = FieldMessage;
exports.MonthPicker = MonthPicker;
exports.mergeIds = mergeIds;
exports.tones = tones;
