import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { Avatar } from "../Avatar/avatar.js";
import { AVATAR_SIZE, ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
const selectionItemStyles = cva(
  "flex items-start gap-2",
  {
    variants: {
      size: {
        sm: "text-body py-[calc((var(--field-height-sm)_-_1lh)_/_2)]",
        md: "text-body py-[calc((var(--field-height-md)_-_1lh)_/_2)]",
        lg: "text-body-lg py-[calc((var(--field-height-lg)_-_1lh)_/_2)]"
      }
    },
    defaultVariants: {
      size: "md"
    }
  }
);
const AVATAR_PX = AVATAR_SIZE;
const blockAlignClass = {
  sm: "h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]",
  md: "h-[calc(1lh+var(--item-gap-label-desc-reading)+var(--font-body-size)*1.5)]",
  lg: "h-[calc(1lh+var(--item-gap-label-desc-reading-lg)+var(--font-body-size)*1.5)]"
};
function lineClampClass(maxLines) {
  if (maxLines === "none" || !maxLines) return "";
  if (maxLines === 1) return "line-clamp-1";
  if (maxLines === 2) return "line-clamp-2";
  if (maxLines === 3) return "line-clamp-3";
  if (maxLines === 4) return "line-clamp-4";
  if (maxLines === 5) return "line-clamp-5";
  if (maxLines === 6) return "line-clamp-6";
  return "";
}
function PrefixSlot({ icon: Icon, avatar, sizeKey, alignClass, avatarPx, disabled }) {
  if (!Icon && !avatar) return null;
  return /* @__PURE__ */ jsxs("div", { className: cn(alignClass, "flex items-center shrink-0"), children: [
    Icon && /* @__PURE__ */ jsx(
      Icon,
      {
        size: ICON_SIZE[sizeKey],
        className: cn("shrink-0", disabled && "text-fg-disabled"),
        "aria-hidden": true
      }
    ),
    !Icon && avatar && /* @__PURE__ */ jsx(Avatar, { src: avatar.src, alt: avatar.alt, color: avatar.color, hoverCard: avatar.hoverCard, size: avatarPx })
  ] });
}
function ContentSlot({ htmlFor, disabled, label, description, sizeKey, labelClampClass, descClampClass }) {
  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
    /* @__PURE__ */ jsx(
      "label",
      {
        htmlFor,
        "aria-disabled": disabled || void 0,
        className: cn(
          "cursor-pointer block break-words",
          labelClampClass,
          disabled ? "text-fg-disabled cursor-not-allowed" : "text-foreground"
        ),
        children: label
      }
    ),
    description && /* @__PURE__ */ jsx(
      "p",
      {
        className: cn(
          sizeKey === "lg" ? "mt-[var(--item-gap-label-desc-reading-lg)]" : "mt-[var(--item-gap-label-desc-reading)]",
          "break-words",
          descClampClass,
          disabled ? "text-fg-disabled" : "text-fg-secondary"
        ),
        style: { fontSize: "var(--font-body-size)" },
        children: description
      }
    )
  ] });
}
const SelectionItem = React.forwardRef(
  ({
    control,
    label,
    description,
    icon: Icon,
    avatar,
    htmlFor,
    disabled,
    size,
    labelMaxLines = "none",
    descMaxLines = "none",
    className,
    ...props
  }, ref) => {
    const sizeKey = size ?? "md";
    if (process.env.NODE_ENV !== "production" && Icon && avatar) {
      console.warn("[SelectionItem] `icon` 和 `avatar` 互斥,只會渲染 icon。");
    }
    const useBlock = !!avatar && !Icon && !!description && AVATAR_PX.block[sizeKey] > 24;
    const avatarPx = useBlock ? AVATAR_PX.block[sizeKey] : AVATAR_PX.inline[sizeKey];
    const alignClass = useBlock ? blockAlignClass[sizeKey] : "h-[1lh]";
    return /* @__PURE__ */ jsxs("div", { ref, className: cn(selectionItemStyles({ size }), className), ...props, children: [
      /* @__PURE__ */ jsx("div", { className: cn(alignClass, "flex items-center shrink-0"), children: control }),
      /* @__PURE__ */ jsx(PrefixSlot, { icon: Icon, avatar, sizeKey, alignClass, avatarPx, disabled }),
      /* @__PURE__ */ jsx(
        ContentSlot,
        {
          htmlFor,
          disabled,
          label,
          description,
          sizeKey,
          labelClampClass: lineClampClass(labelMaxLines),
          descClampClass: lineClampClass(descMaxLines)
        }
      )
    ] });
  }
);
SelectionItem.displayName = "SelectionItem";
const selectionItemMeta = {
  component: "SelectionItem",
  family: 2,
  variants: {},
  sizes: {
    sm: {},
    md: {},
    lg: {}
  },
  defaultSize: "md",
  states: ["default", "disabled"],
  // disabled 是唯一視覺狀態;selected / hover 屬傳入的 control(spec「為何無 ColorMatrix / StateBehavior」)
  tokens: {
    fg: ["text-foreground", "text-fg-secondary", "text-fg-disabled"]
  }
};
export {
  SelectionItem,
  selectionItemMeta,
  selectionItemStyles
};
//# sourceMappingURL=selection-item.js.map
