"use client";
import { jsxs, jsx } 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 }, ref) => {
    const { polyfillAttributes, polyfillElement } = 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__ */ jsxs(
      "span",
      {
        className: classNames(["gds-chip flex h-max -:w-max -:max-w-full", className]),
        ...getCSSPropsAttributes("chip", { size }, style),
        ...polyfillAttributes,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsxs(
            ButtonOrLink,
            {
              ref,
              "data-selected": selectedType || void 0,
              className: `
            group/chip block grow rounded-full border border-white/8 bg-white/4 text-white/88 transition
            @prop-size-small/chip:text-p14
            @prop-size-medium/chip:text-p16
            @prop-size-large/chip:text-p18
            enabled:hocus-visible:border-white/16
            enabled:hocus-visible:bg-white/8
            enabled:hocus-visible:text-white
            enabled:active:border-white/8
            enabled:active:bg-white/4
            enabled:active:text-white/64
            enabled:active:transition-none
            data-[selected]:enabled:border-purple/48
            data-[selected]:enabled:bg-purple/8
            data-[selected]:enabled:hocus-visible:border-purple/64
            data-[selected]:enabled:hocus-visible:bg-purple/16
            data-[selected]:enabled:active:border-purple/48
            data-[selected]:enabled:active:bg-purple/8
            disabled:border-transparent
            disabled:text-white/32
            @prop-size-small/chip:h-8
            @prop-size-small/chip:px-5
            @prop-size-small/chip:nested-icon:default-size-3
            @prop-size-medium/chip:h-10
            @prop-size-medium/chip:px-6
            @prop-size-medium/chip:nested-icon:default-size-4
            @prop-size-large/chip:h-12
            @prop-size-large/chip:px-7
            @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",
                    className: `
                absolute inset-y-0 my-auto [--gds-tag-padding:0px]
                @prop-size-small/chip:left-[5px]
                @prop-size-small/chip:prop-size-small
                @prop-size-medium/chip:left-[9px]
                @prop-size-medium/chip:prop-size-small
                @prop-size-large/chip:left-[11px]
                @prop-size-large/chip:prop-size-medium
              `,
                    children: selectedCount > 9 ? "9+" : selectedCount
                  }
                ) : null,
                /* @__PURE__ */ jsxs(
                  "span",
                  {
                    className: `
              flex h-full items-center justify-center transition-transform
              @prop-size-small/chip:gap-1
              @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:gap-1
              @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:gap-2
              @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.5
            `,
                    children: [
                      iconBefore ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", children: iconBefore }) : null,
                      /* @__PURE__ */ jsx("span", { className: "mx-auto truncate", children }),
                      iconAfter ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", children: iconAfter }) : null
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  }
);
ExperimentalChip.displayName = "ExperimentalChip";
export {
  ExperimentalChip
};
