"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalIcon } from "./Icon.js";
import { ExperimentalTag } from "./Tag.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { ButtonOrLink } from "../atoms/ButtonOrLink/ButtonOrLink.js";
import { Check } from "../icons/Check.js";
const ExperimentalChip = forwardRef(
  ({ size, selected, iconBefore, iconAfter, className, style, children, ...props }, forwardedRef) => {
    const [propsPolyfillRef, propsPolyfillAttributes] = useCSSPropsPolyfill("chip", { size });
    const selectedType = (() => {
      if (typeof selected === "boolean") return selected;
      if (typeof selected === "number" && selected > 0) return "count";
      if (selected === "checked") return "checked";
      return false;
    })();
    const selectedCount = selectedType === "count" ? selected : selectedType ? 1 : 0;
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref: propsPolyfillRef,
        className: classNames(["gds-chip flex -:w-max -:max-w-full +:h-max", className]),
        ...getCSSPropsAttributes("chip", { size }, style),
        ...propsPolyfillAttributes,
        children: /* @__PURE__ */ jsxs(
          ButtonOrLink,
          {
            ref: forwardedRef,
            "data-selected": selectedType || void 0,
            className: `
            group/chip block grow rounded-full border border-space-1300 bg-space-1500 text-white transition
            @prop-size-small/chip:text-p14
            @prop-size-medium/chip:text-p16
            @prop-size-large/chip:text-p18
            -:*:transition-opacity
            enabled:hover:border-space-1200
            enabled:hover:bg-space-1400
            enabled:active:border-space-1400
            enabled:active:bg-space-1600
            enabled:active:transition-none
            disabled:border-transparent
            -:*:disabled:opacity-40
            data-[selected]:enabled:border-purple-800
            data-[selected]:enabled:bg-purple-1100
            data-[selected]:enabled:hover:border-purple-700
            data-[selected]:enabled:hover:bg-purple-1000
            data-[selected]:enabled:active:border-purple-900
            data-[selected]:enabled:active:bg-purple-1200
            @prop-size-small/chip:h-8
            @prop-size-small/chip:px-4.5
            @prop-size-small/chip:nested-icon:default-size-3
            @prop-size-medium/chip:h-10
            @prop-size-medium/chip:px-5
            @prop-size-medium/chip:nested-icon:default-size-4
            @prop-size-large/chip:h-12
            @prop-size-large/chip:px-5.5
            @prop-size-large/chip:nested-icon:default-size-5
          `,
            ...props,
            children: [
              selectedType === "checked" ? /* @__PURE__ */ jsx(
                Check,
                {
                  alt: "",
                  className: `
                absolute inset-y-0 my-auto
                @prop-size-small/chip:left-2
                @prop-size-medium/chip:left-2.5
                @prop-size-large/chip:left-3
              `
                }
              ) : selectedType === "count" ? /* @__PURE__ */ jsx(
                ExperimentalTag,
                {
                  "aria-hidden": "true",
                  size: "small",
                  className: `
                absolute inset-y-0 my-auto [--gds-tag-padding:0px]
                @prop-size-small/chip:left-[5px]
                @prop-size-medium/chip:left-[9px]
                @prop-size-large/chip:left-[12px]
              `,
                  children: selectedCount > 9 ? "9+" : selectedCount
                }
              ) : null,
              /* @__PURE__ */ jsxs(
                "span",
                {
                  className: `
              flex h-full items-center justify-center gap-0.5 transition
              @prop-size-small/chip:group-data-[selected=checked]/chip:translate-x-1.5
              @prop-size-small/chip:group-data-[selected=count]/chip:translate-x-2.5
              @prop-size-medium/chip:group-data-[selected=checked]/chip:translate-x-2
              @prop-size-medium/chip:group-data-[selected=count]/chip:translate-x-3
              @prop-size-large/chip:group-data-[selected=checked]/chip:translate-x-2.5
              @prop-size-large/chip:group-data-[selected=count]/chip:translate-x-3
            `,
                  children: [
                    iconBefore ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", children: iconBefore }) : null,
                    /* @__PURE__ */ jsx(
                      "span",
                      {
                        className: `
                mx-auto truncate
                @prop-size-small/chip:px-0.5
                @prop-size-medium/chip:px-1
                @prop-size-large/chip:px-1.5
              `,
                        children
                      }
                    ),
                    iconAfter ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", children: iconAfter }) : null
                  ]
                }
              )
            ]
          }
        )
      }
    );
  }
);
ExperimentalChip.displayName = "ExperimentalChip";
export {
  ExperimentalChip
};
