import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { forwardRef, useRef, useEffect } from "react";
import { FieldOverlay } from "../../Button/Button.mjs";
import { buildDataAttributes } from "../../Accordion/Accordion.mjs";
import { Box } from "../../Box/Box.mjs";
import { realField, sizeVars, isMixed, fakeField, hideBorderOnDarkBackgroundInLightMode, selected, focusOverlay, hoverOverlay, checkboxIndicator, radioIndicator } from "./InlineField.css.mjs";
import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
import { IconMinus, IconTick } from "../../Accordion/AccordionItem.mjs";
const tones = ["neutral", "critical"];
const Indicator = ({
  type,
  checked,
  hover = false,
  disabled = false
}) => {
  const isCheckbox = type === "checkbox";
  const iconTone = (() => {
    if (disabled) {
      return "secondary";
    }
    if (hover) {
      return "formAccent";
    }
  })();
  return isCheckbox ? /* @__PURE__ */ jsxs(
    Box,
    {
      height: "full",
      transition: "fast",
      position: "relative",
      className: checkboxIndicator,
      children: [
        /* @__PURE__ */ jsx(
          Box,
          {
            position: "absolute",
            inset: 0,
            transition: "fast",
            opacity: checked !== "mixed" ? 0 : void 0,
            children: /* @__PURE__ */ jsx(IconMinus, { size: "fill", tone: iconTone })
          }
        ),
        /* @__PURE__ */ jsx(
          Box,
          {
            position: "absolute",
            inset: 0,
            transition: "fast",
            opacity: checked !== true ? 0 : void 0,
            children: /* @__PURE__ */ jsx(IconTick, { size: "fill", tone: iconTone })
          }
        )
      ]
    }
  ) : /* @__PURE__ */ jsx(
    Box,
    {
      background: disabled ? { lightMode: "neutralLight", darkMode: "surfaceDark" } : "formAccent",
      transition: "fast",
      width: "full",
      height: "full",
      borderRadius: "full",
      className: radioIndicator
    }
  );
};
const StyledInput = forwardRef(
  ({
    id,
    name,
    value,
    checked,
    data,
    onChange,
    type,
    tone = "neutral",
    disabled = false,
    required,
    tabIndex,
    size = "standard",
    "aria-describedby": ariaDescribedBy,
    "aria-labelledby": ariaLabelledBy,
    "aria-label": ariaLabel,
    ...restProps
  }, forwardedRef) => {
    const defaultRef = useRef(null);
    const ref = forwardedRef || defaultRef;
    const indeterminateRef = useRef(false);
    if (tones.indexOf(tone) === -1) {
      throw new Error(`Invalid tone: ${tone}`);
    }
    const isCheckbox = type === "checkbox";
    const fieldBorderRadius = isCheckbox ? "standard" : "full";
    const accentBackground = disabled ? "neutralLight" : "formAccent";
    const isMixed$1 = isCheckbox && checked === "mixed";
    const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
    const defaultBorder = checked ? "formAccent" : "default";
    useEffect(() => {
      if (ref && typeof ref === "object" && ref.current && isCheckbox) {
        ref.current.indeterminate = isMixed$1;
        indeterminateRef.current = isMixed$1;
      }
    }, [ref, isMixed$1, isCheckbox]);
    const { lightMode } = useBackgroundLightness();
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        Box,
        {
          component: "input",
          type,
          id,
          name,
          value,
          onChange: isMixed$1 ? (e) => {
            if (ref && typeof ref === "object" && ref.current) {
              ref.current.indeterminate = indeterminateRef.current;
            }
            if (typeof onChange === "function") {
              onChange(e);
            }
          } : onChange,
          checked: checked === "mixed" ? false : checked,
          position: "absolute",
          zIndex: 1,
          className: [
            realField,
            sizeVars[size],
            isMixed$1 ? isMixed : void 0
          ],
          cursor: !disabled ? "pointer" : void 0,
          opacity: 0,
          "aria-describedby": ariaDescribedBy,
          "aria-labelledby": ariaLabelledBy,
          "aria-label": ariaLabel,
          "aria-checked": isMixed$1 ? "mixed" : checked,
          "aria-required": required,
          disabled,
          ref,
          tabIndex,
          ...buildDataAttributes({ data, validateRestProps: restProps })
        }
      ),
      /* @__PURE__ */ jsxs(
        Box,
        {
          flexShrink: 0,
          position: "relative",
          className: [fakeField, sizeVars[size]],
          background: fieldBackground,
          borderRadius: fieldBorderRadius,
          children: [
            /* @__PURE__ */ jsx(
              FieldOverlay,
              {
                variant: disabled ? "disabled" : defaultBorder,
                borderRadius: fieldBorderRadius,
                visible: tone !== "critical" || disabled,
                className: {
                  [hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
                }
              }
            ),
            /* @__PURE__ */ jsx(
              FieldOverlay,
              {
                variant: "critical",
                borderRadius: fieldBorderRadius,
                visible: tone === "critical" && !disabled
              }
            ),
            /* @__PURE__ */ jsx(
              FieldOverlay,
              {
                variant: tone === "critical" && isCheckbox ? tone : void 0,
                background: isCheckbox ? accentBackground : void 0,
                borderRadius: fieldBorderRadius,
                className: selected,
                children: /* @__PURE__ */ jsx(Indicator, { type, disabled, checked })
              }
            ),
            /* @__PURE__ */ jsx(
              FieldOverlay,
              {
                variant: "focus",
                borderRadius: fieldBorderRadius,
                className: focusOverlay
              }
            ),
            /* @__PURE__ */ jsx(
              FieldOverlay,
              {
                variant: "formAccent",
                borderRadius: fieldBorderRadius,
                className: hoverOverlay,
                children: /* @__PURE__ */ jsx(Indicator, { type, hover: true, checked: true })
              }
            )
          ]
        }
      )
    ] });
  }
);
export {
  StyledInput
};
