"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { forwardRef, Fragment, isValidElement, cloneElement } from "react";
import { isIcon } from "../../utils/getChildrenChunks.js";
import { Badge } from "../../atoms/Badge/Badge.js";
import { FontSize } from "../../tokens/FontSize.js";
import { Text } from "../../atoms/Text/Text.js";
import { buildTransition, buildColor, buildBorder } from "../../tokens/utils.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Spacing } from "../../tokens/Spacing.js";
import { ButtonOrLink } from "../../atoms/ButtonOrLink/ButtonOrLink.js";
const CHIP_SIZES = {
  small: {
    height: 24,
    padding: 12,
    fontSize: FontSize["12px"],
    iconSize: 12,
    badgeSize: 20
  },
  medium: {
    height: 32,
    padding: 12,
    fontSize: FontSize["14px"],
    iconSize: 14,
    badgeSize: 20
  },
  large: {
    height: 40,
    padding: 16,
    fontSize: FontSize["16px"],
    iconSize: 16,
    badgeSize: 24
  },
  xlarge: {
    height: 64,
    padding: 20,
    fontSize: FontSize["18px"],
    iconSize: 24,
    badgeSize: 24
  }
};
const Chip = forwardRef(
  ({
    size = "medium",
    iconLeft: passedIconLeft,
    iconRight,
    icon,
    badge,
    disabled = false,
    selected,
    className,
    children,
    ...props
  }, ref) => {
    const iconLeft = passedIconLeft ?? icon;
    const { height, padding, fontSize, iconSize, badgeSize } = CHIP_SIZES[size];
    const iconPadding = (height - iconSize) / 2;
    const badgePadding = (height - badgeSize) / 2;
    let paddingLeft = padding;
    let paddingRight = padding;
    const usingRenderFunction = typeof children === "function";
    if (!usingRenderFunction) {
      const useBadgePaddingOnLeft = Boolean(badge);
      const useIconPaddingOnLeft = !badge && (Boolean(iconLeft) || Boolean(iconRight) && !children);
      const useIconPaddingOnRight = Boolean(iconRight) || Boolean(iconLeft) && !children;
      paddingLeft = useBadgePaddingOnLeft ? badgePadding : useIconPaddingOnLeft ? iconPadding : padding;
      paddingRight = useIconPaddingOnRight ? iconPadding : padding;
    }
    const getChipStyles = () => {
      if (disabled) {
        return {
          borderColor: "transparent",
          bg: buildColor(["Midnight48", "White4"]),
          color: "White32",
          pointerEvents: "none"
        };
      }
      if (selected) {
        return {
          borderColor: "Purple32",
          bg: buildColor(["Midnight48", "Purple32"]),
          "&:hover": {
            borderColor: "Purple48",
            bg: "Purple48",
            color: "White"
          },
          "&:active": {
            borderColor: "Purple16",
            bg: buildColor(["Midnight48", "Purple16"]),
            color: "White88"
          }
        };
      }
      return {
        borderColor: "White8",
        bg: buildColor(["Midnight48", "White4"]),
        "&:hover": {
          borderColor: "White8",
          bg: "White8",
          color: "White"
        },
        "&:active": {
          borderColor: "White4",
          bg: "White4",
          color: "White64"
        }
      };
    };
    const getIcon = (side) => {
      let icon2 = {
        left: iconLeft,
        right: iconRight
      }[side];
      if (!isValidElement(icon2)) {
        return null;
      }
      if (isIcon(icon2) && !icon2.props.size) {
        const newProps = { size: `${iconSize}px` };
        icon2 = cloneElement(icon2, newProps);
      }
      return icon2;
    };
    const getBadge = () => {
      let finalBadge;
      if (typeof badge === "string" || typeof badge === "number") {
        finalBadge = /* @__PURE__ */ jsx(Badge, { size: `${badgeSize}px`, children: badge });
      } else {
        if (!isValidElement(badge)) {
          return null;
        }
        if (!badge.props.size) {
          const newProps = { size: `${badgeSize}px` };
          finalBadge = cloneElement(badge, newProps);
        }
      }
      return finalBadge;
    };
    return /* @__PURE__ */ jsxs(
      ButtonOrLink,
      {
        ref,
        disabled,
        selected,
        className,
        sx: {
          display: "flex",
          alignItems: "center",
          gap: !usingRenderFunction ? Spacing["8px"] : void 0,
          width: "fit-content",
          height: `${height}px`,
          paddingInlineStart: `${paddingLeft}px`,
          paddingInlineEnd: `${paddingRight}px`,
          borderRadius: BorderRadius.FULL,
          border: "0px solid transparent",
          backdropFilter: "blur(32px)",
          color: "White88",
          fontSize,
          whiteSpace: "nowrap",
          transition: buildTransition("COLORS", "400ms"),
          ...getChipStyles(),
          "&:focus-visible": {
            borderColor: "Purple",
            bg: "White8",
            outline: buildBorder("Purple16", "8px"),
            outlineOffset: 0
          }
        },
        ...props,
        children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              sx: {
                position: "absolute",
                inset: 0,
                borderRadius: "inherit",
                border: "inherit",
                borderWidth: "1px"
              }
            }
          ),
          usingRenderFunction ? children() : /* @__PURE__ */ jsxs(Fragment, { children: [
            getBadge(),
            getIcon("left"),
            children ? /* @__PURE__ */ jsx(Text, { inline: true, truncate: true, sx: { mr: "auto" }, children }) : null,
            getIcon("right")
          ] })
        ]
      }
    );
  }
);
Chip.displayName = "Chip";
export {
  Chip
};
