import { jsxs, jsx } from "react/jsx-runtime";
import { useContext } from "react";
import assert from "assert";
import { TextContext, Overlay } from "../Accordion/AccordionItem.mjs";
import { Box } from "../Box/Box.mjs";
import { HeadingContext } from "../Heading/Heading.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { select, focusOverlay } from "./TextDropdown.css.mjs";
import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
function parseSimpleToComplexOption(option) {
  return typeof option === "object" && option !== null && "text" in option && "value" in option ? option : { value: option, text: String(option) };
}
function TextDropdown({
  id,
  value,
  onChange,
  onBlur,
  options,
  label,
  data,
  ...restProps
}) {
  assert(
    (() => {
      const inText = useContext(TextContext);
      const inHeading = useContext(HeadingContext);
      return inText || inHeading;
    })(),
    "TextDropdown components must be rendered within a Text or Heading component. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/TextDropdown"
  );
  const parsedOptions = options.map(parseSimpleToComplexOption);
  const [currentText] = parsedOptions.filter((o) => value === o.value);
  if (!currentText || !currentText.text) {
    throw new Error(
      `The provided value of "${value}" does not exist in the provided \`options\` list.`
    );
  }
  return /* @__PURE__ */ jsxs(
    Box,
    {
      display: "inlineBlock",
      position: "relative",
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        /* @__PURE__ */ jsxs(Box, { pointerEvents: "none", userSelect: "none", children: [
          currentText.text,
          " ",
          /* @__PURE__ */ jsx(IconChevron, { alignY: "lowercase" })
        ] }),
        /* @__PURE__ */ jsx(
          Box,
          {
            component: "select",
            position: "absolute",
            inset: 0,
            width: "full",
            opacity: 0,
            className: select,
            "aria-label": label,
            title: label,
            id,
            value: String(value),
            onChange: (ev) => {
              if (typeof onChange === "function") {
                const newValue = parsedOptions[ev.currentTarget.selectedIndex].value;
                onChange(newValue);
              }
            },
            onBlur,
            children: /* @__PURE__ */ jsx("optgroup", { label, children: parsedOptions.map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.text }, String(option.value))) })
          }
        ),
        /* @__PURE__ */ jsx(
          Overlay,
          {
            boxShadow: "outlineFocus",
            borderRadius: "standard",
            transition: "fast",
            onlyVisibleForKeyboardNavigation: true,
            className: focusOverlay
          }
        )
      ]
    }
  );
}
export {
  TextDropdown,
  parseSimpleToComplexOption
};
