import { jsxs, jsx } from "react/jsx-runtime";
import assert from "assert";
import { Fragment } from "react";
import clsx from "clsx";
import { Box } from "../../Box/Box.mjs";
import { FieldLabel, mergeIds, FieldMessage } from "../../MonthPicker/MonthPicker.mjs";
import { FieldOverlay } from "../../Button/Button.mjs";
import { Stack } from "../../Stack/Stack.mjs";
import { buildDataAttributes } from "../../Accordion/Accordion.mjs";
import { textStyles } from "../../../css/typography.mjs";
import { touchableText } from "../../../css/typography.css.mjs";
import { Text } from "../../Accordion/AccordionItem.mjs";
import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, hideBorderOnDarkBackgroundInLightMode, focusOverlay, hoverOverlay } from "./Field.css.mjs";
import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
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(
    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 } = useBackgroundLightness();
  const overlays = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      FieldOverlay,
      {
        variant: disabled ? "disabled" : "default",
        visible: tone !== "critical" || disabled,
        className: {
          [hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
        }
      }
    ),
    /* @__PURE__ */ jsx(
      FieldOverlay,
      {
        variant: "critical",
        visible: tone === "critical" && !disabled
      }
    ),
    /* @__PURE__ */ jsx(FieldOverlay, { variant: "focus", className: focusOverlay }),
    /* @__PURE__ */ jsx(FieldOverlay, { variant: "formAccent", className: hoverOverlay })
  ] });
  const fieldPadding = "small";
  return /* @__PURE__ */ jsxs(Stack, { space: "xsmall", children: [
    hasVisualLabelOrDescription ? /* @__PURE__ */ jsx(
      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__ */ jsx(
      Box,
      {
        position: "relative",
        background: fieldBackground,
        borderRadius: "standard",
        display: "flex",
        className: showSecondaryIcon ? 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": 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,
            ...buildDataAttributes({ data, validateRestProps: restProps }),
            className: clsx(
              field,
              placeholderColor,
              textStyles({
                tone: hasValue && !disabled ? "neutral" : "secondary",
                size: "standard",
                baseline: false
              }),
              touchableText.standard,
              icon && !prefix ? iconSpace : null
            )
          },
          icon ? /* @__PURE__ */ jsx(
            Box,
            {
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              position: "absolute",
              height: "touchable",
              width: "touchable",
              pointerEvents: "none",
              top: 0,
              left: 0,
              children: /* @__PURE__ */ jsx(Text, { baseline: false, tone: prefix ? "secondary" : void 0, children: icon })
            }
          ) : null,
          secondaryIcon ? /* @__PURE__ */ jsx(
            Box,
            {
              component: "span",
              position: "absolute",
              width: "touchable",
              height: "touchable",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              top: 0,
              right: 0,
              children: secondaryIcon
            }
          ) : null,
          prefix ? /* @__PURE__ */ jsxs(
            Box,
            {
              component: "label",
              htmlFor: id,
              display: "flex",
              alignItems: "center",
              paddingLeft: icon ? void 0 : fieldPadding,
              height: "touchable",
              flexShrink: 0,
              className: icon ? iconSpace : null,
              children: [
                /* @__PURE__ */ jsx(Text, { tone: "secondary", baseline: false, children: prefix }),
                /* @__PURE__ */ jsx(Box, { padding: fieldPadding, paddingRight: "none", height: "full", children: /* @__PURE__ */ jsx(Box, { height: "full", className: verticalDivider }) })
              ]
            }
          ) : null
        )
      }
    ),
    message || secondaryMessage || reserveMessageSpace ? /* @__PURE__ */ jsx(
      FieldMessage,
      {
        id: messageId,
        tone,
        disabled,
        message,
        secondaryMessage,
        reserveMessageSpace
      }
    ) : null
  ] });
};
export {
  Field
};
