"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { useContext, useCallback } from "react";
import { DropdownContext } from "./DropdownContext.js";
import { menuItemStyles } from "./styles.js";
import { LinkArrowIcon } from "../Link/LinkArrowIcon.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Opacity } from "../../tokens/Opacity.js";
import { Text } from "../../atoms/Text/Text.js";
import { Spacing } from "../../tokens/Spacing.js";
import { ButtonOrLink } from "../../atoms/ButtonOrLink/ButtonOrLink.js";
import { buildTransition } from "../../tokens/utils.js";
const DropdownMenuItem = ({
  value = null,
  href,
  target,
  disabled,
  onSelect: onSelectOriginal,
  children,
  ...props
}) => {
  const context = useContext(DropdownContext);
  const selected = context.type === "select" ? Boolean(context.value === value) : void 0;
  const role = context.type === "select" ? "option" : "menuitem";
  const buttonOrLinkProps = href ? {
    href,
    target,
    disabled,
    selected,
    role
  } : {
    disabled,
    selected,
    role
  };
  const onSelect = useCallback(
    (event) => {
      onSelectOriginal == null ? void 0 : onSelectOriginal(event);
      if (!event.defaultPrevented && context.type === "select") {
        context.setSelectedValue(value);
      }
    },
    [onSelectOriginal, context, value]
  );
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.Item,
    {
      asChild: true,
      "data-value": value !== null ? String(value) : void 0,
      "aria-selected": selected,
      disabled,
      onSelect,
      sx: menuItemStyles,
      ...props,
      children: /* @__PURE__ */ jsxs(
        ButtonOrLink,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            gap: Spacing["8px"]
          },
          ...buttonOrLinkProps,
          children: [
            role === "option" ? /* @__PURE__ */ jsx(
              Icon.DiamondSolid,
              {
                size: "14px",
                sx: {
                  opacity: Opacity["0%"],
                  '.gds-ButtonOrLink[aria-selected="true"] &': { opacity: Opacity["100%"] },
                  '.gds-ButtonOrLink:focus:not([aria-selected="true"]) &': { opacity: Opacity["32%"] }
                }
              }
            ) : /* @__PURE__ */ jsx("div", { sx: { width: "14px", height: "14px" } }),
            /* @__PURE__ */ jsx(Text.P16, { as: "span", sx: { flex: 1 }, children })
          ]
        }
      )
    }
  );
};
DropdownMenuItem.displayName = "Dropdown.Menu.Item";
function DropdownMenuItemIcon(props) {
  return /* @__PURE__ */ jsx(
    LinkArrowIcon,
    {
      inline: true,
      sx: {
        verticalAlign: "middle",
        top: "-0.1em",
        opacity: 0,
        transition: buildTransition("opacity, transform"),
        ".gds-ButtonOrLink:focus &": { opacity: 1 }
      },
      ...props
    }
  );
}
DropdownMenuItemIcon.displayName = "Dropdown.Menu.Item.Icon";
DropdownMenuItem.Icon = DropdownMenuItemIcon;
export {
  DropdownMenuItem,
  DropdownMenuItemIcon
};
