import "../Card.css";
import { jsx, jsxs } from "react/jsx-runtime";
import Collection, { LayoutMode } from "./Collection.js";
import Icon from "./Icon.js";
import { isNumber } from "./internal/functions.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import { ShirtSize } from "./Theme/themes.js";
import Button from "./Button.js";
import Dropdown from "./Dropdown.js";
import Surface from "./Surface.js";
const cardBase = "Card_cardBase_4ec5b";
const action = "Card_action_4ec5b";
const content = "Card_content_4ec5b";
const clickable = "Card_clickable_4ec5b";
const smallCard = "Card_smallCard_4ec5b";
const mediumCard = "Card_mediumCard_4ec5b";
const groupBase = "Card_groupBase_4ec5b";
const css = {
  cardBase,
  action,
  content,
  clickable,
  smallCard,
  mediumCard,
  groupBase
};
const CardSizes = {
  medium: { minHeight: "110px", minWidth: "302px" },
  small: { minHeight: "64px", minWidth: "143px" }
};
const stopPropagation = (e) => e.stopPropagation();
const Card = ({
  actionMenu,
  children,
  disabled = false,
  onClick,
  onDropdown,
  size = "small",
  testId
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classnames = [css.cardBase, themeClass];
  if (onClick)
    classnames.push(css.clickable);
  const sizeStyle = CardSizes[size];
  switch (size) {
    case "small":
      classnames.push(css.smallCard);
      break;
    case "medium":
      classnames.push(css.mediumCard);
      break;
  }
  const actionsAvailable = (actionMenu == null ? void 0 : actionMenu.length) !== void 0 && actionMenu.length > 0;
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: classnames.join(" "),
      "data-testid": testId,
      style: sizeStyle,
      tabIndex: onClick ? 0 : -1,
      onClick,
      children: /* @__PURE__ */ jsxs(Surface, { hover: !!onClick, children: [
        /* @__PURE__ */ jsx("section", { className: css.content, children }),
        actionsAvailable && /* @__PURE__ */ jsx("div", { className: css.action, onClick: stopPropagation, children: /* @__PURE__ */ jsx(
          Dropdown,
          {
            disabled,
            menu: actionMenu,
            placement: "bottomRight",
            onClick: onDropdown,
            children: /* @__PURE__ */ jsx(
              Button,
              {
                icon: /* @__PURE__ */ jsx(Icon, { name: "overflow-horizontal", size: "tiny", title: "Action menu" }),
                type: "text",
                onClick: stopPropagation
              }
            )
          }
        ) })
      ] })
    }
  );
};
const CardGroup = ({
  children,
  wrap = true,
  size = "small"
}) => {
  const cardSize = CardSizes[size].minWidth;
  const minCardWidth = isNumber(cardSize) ? cardSize : parseInt(cardSize);
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.groupBase, themeClass];
  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), children: /* @__PURE__ */ jsx(
    Collection,
    {
      gap: ShirtSize.Large,
      minItemWidth: minCardWidth,
      mode: wrap ? LayoutMode.AutoFill : LayoutMode.ScrollableRow,
      children
    }
  ) });
};
Card.Group = CardGroup;
export {
  Card as default
};
