"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const React = require("react");
const clsx = require("clsx");
const styles_lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const styles_lib_components_MonthPicker_MonthPicker_cjs = require("../../MonthPicker/MonthPicker.cjs");
const styles_lib_components_Button_Button_cjs = require("../../Button/Button.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_css_typography_cjs = require("../../../css/typography.cjs");
const styles_lib_css_typography_css_cjs = require("../../../css/typography.css.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../../Accordion/AccordionItem.cjs");
const styles_lib_components_private_Field_Field_css_cjs = require("./Field.css.cjs");
const styles_lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
const Field = ({
  id,
  value,
  name,
  disabled,
  autoComplete,
  children,
  description,
  message,
  secondaryMessage,
  reserveMessageSpace = false,
  tone,
  "aria-describedby": ariaDescribedBy,
  data,
  secondaryIcon,
  alwaysShowSecondaryIcon = false,
  autoFocus,
  icon,
  prefix,
  required,
  ...restProps
}) => {
  assert__default.default(
    prefix === void 0 || typeof prefix === "string",
    "Prefix must be a string"
  );
  const messageId = `${id}-message`;
  const descriptionId = description ? `${id}-description` : void 0;
  const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
  const hasValue = typeof value === "string" ? value.length > 0 : value != null;
  const hasVisualLabelOrDescription = "label" in restProps || description;
  const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
  const { lightMode } = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
  const overlays = /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Button_Button_cjs.FieldOverlay,
      {
        variant: disabled ? "disabled" : "default",
        visible: tone !== "critical" || disabled,
        className: {
          [styles_lib_components_private_Field_Field_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
        }
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Button_Button_cjs.FieldOverlay,
      {
        variant: "critical",
        visible: tone === "critical" && !disabled
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.FieldOverlay, { variant: "focus", className: styles_lib_components_private_Field_Field_css_cjs.focusOverlay }),
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.FieldOverlay, { variant: "formAccent", className: styles_lib_components_private_Field_Field_css_cjs.hoverOverlay })
  ] });
  const fieldPadding = "small";
  return /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space: "xsmall", children: [
    hasVisualLabelOrDescription ? /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_MonthPicker_MonthPicker_cjs.FieldLabel,
      {
        htmlFor: id,
        label: "label" in restProps ? restProps.label : void 0,
        disabled,
        secondaryLabel: "secondaryLabel" in restProps ? restProps.secondaryLabel : void 0,
        tertiaryLabel: "tertiaryLabel" in restProps ? restProps.tertiaryLabel : void 0,
        description,
        descriptionId
      }
    ) : null,
    /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Box_Box_cjs.Box,
      {
        position: "relative",
        background: fieldBackground,
        borderRadius: "standard",
        display: "flex",
        className: showSecondaryIcon ? styles_lib_components_private_Field_Field_css_cjs.secondaryIconSpace : void 0,
        children: children(
          overlays,
          {
            id,
            name,
            background: fieldBackground,
            width: "full",
            paddingLeft: fieldPadding,
            paddingRight: showSecondaryIcon ? void 0 : fieldPadding,
            borderRadius: "standard",
            outline: "none",
            "aria-describedby": styles_lib_components_MonthPicker_MonthPicker_cjs.mergeIds(
              ariaDescribedBy,
              message || secondaryMessage ? messageId : void 0,
              descriptionId
            ),
            "aria-required": required,
            ..."aria-label" in restProps ? { "aria-label": restProps["aria-label"] } : {},
            ..."aria-labelledby" in restProps ? { "aria-labelledby": restProps["aria-labelledby"] } : {},
            disabled,
            autoComplete,
            autoFocus,
            ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
            className: clsx__default.default(
              styles_lib_components_private_Field_Field_css_cjs.field,
              styles_lib_components_private_Field_Field_css_cjs.placeholderColor,
              styles_lib_css_typography_cjs.textStyles({
                tone: hasValue && !disabled ? "neutral" : "secondary",
                size: "standard",
                baseline: false
              }),
              styles_lib_css_typography_css_cjs.touchableText.standard,
              icon && !prefix ? styles_lib_components_private_Field_Field_css_cjs.iconSpace : null
            )
          },
          icon ? /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.Box,
            {
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              position: "absolute",
              height: "touchable",
              width: "touchable",
              pointerEvents: "none",
              top: 0,
              left: 0,
              children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { baseline: false, tone: prefix ? "secondary" : void 0, children: icon })
            }
          ) : null,
          secondaryIcon ? /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.Box,
            {
              component: "span",
              position: "absolute",
              width: "touchable",
              height: "touchable",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              top: 0,
              right: 0,
              children: secondaryIcon
            }
          ) : null,
          prefix ? /* @__PURE__ */ jsxRuntime.jsxs(
            styles_lib_components_Box_Box_cjs.Box,
            {
              component: "label",
              htmlFor: id,
              display: "flex",
              alignItems: "center",
              paddingLeft: icon ? void 0 : fieldPadding,
              height: "touchable",
              flexShrink: 0,
              className: icon ? styles_lib_components_private_Field_Field_css_cjs.iconSpace : null,
              children: [
                /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: "secondary", baseline: false, children: prefix }),
                /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { padding: fieldPadding, paddingRight: "none", height: "full", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { height: "full", className: styles_lib_components_private_Field_Field_css_cjs.verticalDivider }) })
              ]
            }
          ) : null
        )
      }
    ),
    message || secondaryMessage || reserveMessageSpace ? /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_MonthPicker_MonthPicker_cjs.FieldMessage,
      {
        id: messageId,
        tone,
        disabled,
        message,
        secondaryMessage,
        reserveMessageSpace
      }
    ) : null
  ] });
};
exports.Field = Field;
