"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useContext, createContext, useId } from "react";
import { ExperimentalRender } from "./Render.js";
import { useCSSState } from "./tailwind/useCSSState.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalBaseCheckable = forwardRef(
  ({
    size,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    checked,
    disabled,
    className,
    style,
    children,
    ...props
  }, forwardedRef) => {
    const hasAncestorLabel = useContext(ExperimentalBaseCheckableLabelContext) !== null;
    const hasAccessibleLabel = Boolean(
      hasAncestorLabel || label || ariaLabel !== void 0 || ariaLabelledBy !== void 0
    );
    if (!hasAccessibleLabel) {
      console.warn(
        "ExperimentalBaseCheckable: One of `label`, `aria-label`, or `aria-labelledby` should be set for accessibility when there is no ancestor `ExperimentalBaseCheckableLabel`"
      );
    }
    if (ariaLabel && ariaLabelledBy) {
      console.warn(
        "ExperimentalBaseCheckable: `aria-label` and `aria-labelledby` should not be used together; `aria-labelledby` will be ignored"
      );
    }
    const [stateForwardedRef, state] = useCSSState({ ref: forwardedRef, checked, disabled });
    const [propsPolyfillStateForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "checkable",
      { size },
      { ref: stateForwardedRef }
    );
    const uniqueId = useId();
    const labelId = label ? `gds-checkable-label-${uniqueId}` : void 0;
    const checkableProps = {};
    if (ariaLabel) {
      checkableProps["aria-label"] = ariaLabel;
    } else if (ariaLabelledBy) {
      checkableProps["aria-labelledby"] = ariaLabelledBy;
    } else if (labelId) {
      checkableProps["aria-labelledby"] = labelId;
    }
    return /* @__PURE__ */ jsx(
      ExperimentalBaseCheckableLabel,
      {
        ref: propsPolyfillStateForwardedRef,
        className: classNames([
          `gds-checkable flex -:w-max -:max-w-full
          -:has-nested-hover/checkable:clickable:not-has-clickable-hover:state-hover
          -:has-nested-active/checkable:clickable:not-has-clickable-active:state-active
          -:has-nested-focus-visible/checkable:not-in-group/label:state-focus
          -:has-nested-hover/checkable:group-clickable/label:group-not-has-clickable-hover/label:state-hover
          -:has-nested-active/checkable:group-clickable/label:group-not-has-clickable-active/label:state-active
          +:h-max
          +:has-nested-checked/checkable:state-checked
          +:has-nested-indeterminate/checkable:state-indeterminate
          +:has-nested-disabled/checkable:state-disabled`,
          className
        ]),
        ...state.forwardedAttributes,
        ...getCSSPropsAttributes("checkable", { size }, style),
        ...propsPolyfillAttributes,
        ...props,
        children: /* @__PURE__ */ jsxs(
          "span",
          {
            className: `
            flex
            nested/checkable:absolute
            nested/checkable:size-full
            nested/checkable:opacity-0
            nested/checkable:pointer-events-none
            @prop-size-small/checkable:gap-1.5
            @prop-size-medium/checkable:gap-2
            @prop-size-large/checkable:gap-2
          `,
            children: [
              children({ checkableProps }),
              label ? /* @__PURE__ */ jsx(
                "span",
                {
                  id: labelId,
                  className: `
                text-space-200 transition
                disabled:**:pointer-events-none ${/* Prevent any disabled nested link or button from stealing the click if the checkable is enabled */
                  ""}
                @state-hover/checkable:text-white
                @state-active/checkable:text-space-500
                @state-active/checkable:transition-none
                @state-disabled/checkable:text-space-1000
                @prop-size-small/checkable:text-12
                @prop-size-small/checkable:leading-4
                @prop-size-medium/checkable:text-14
                @prop-size-medium/checkable:leading-5
                @prop-size-large/checkable:text-16
                @prop-size-large/checkable:leading-6
              `,
                  children: label
                }
              ) : null
            ]
          }
        )
      }
    );
  }
);
ExperimentalBaseCheckable.displayName = "ExperimentalBaseCheckable";
const ExperimentalBaseCheckableBox = forwardRef(
  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ jsx(
    "span",
    {
      ref: forwardedRef,
      className: classNames([
        `flex shrink-0 items-center justify-center border border-space-1200 transition
        @state-hover/checkable:border-space-1100
        @state-focus/checkable:outline-focus
        @state-active/checkable:border-space-1200
        @state-active/checkable:transition-none
        @state-disabled/checkable:border-space-1300
        @state-disabled/checkable:bg-space-1500
        @state-not-unchecked/checkable:border-transparent
        @state-not-unchecked/checkable:bg-purple-600
        @state-not-unchecked/checkable:@state-hover/checkable:border-transparent
        @state-not-unchecked/checkable:@state-hover/checkable:bg-purple-500
        @state-not-unchecked/checkable:@state-active/checkable:border-purple-700
        @state-not-unchecked/checkable:@state-active/checkable:bg-purple-1100
        @state-not-unchecked/checkable:@state-disabled/checkable:border-transparent
        @state-not-unchecked/checkable:@state-disabled/checkable:bg-purple-1000
        @prop-size-small/checkable:size-4
        @prop-size-medium/checkable:size-5
        @prop-size-large/checkable:size-6`,
        className
      ]),
      ...props
    }
  )
);
ExperimentalBaseCheckableBox.displayName = "ExperimentalBaseCheckableBox";
const ExperimentalBaseCheckableLabelContext = createContext(null);
const ExperimentalBaseCheckableLabel = forwardRef(
  ({ render, className, ...props }, forwardedRef) => {
    const hasAncestorLabel = useContext(ExperimentalBaseCheckableLabelContext) !== null;
    const renderLabel = !hasAncestorLabel;
    return /* @__PURE__ */ jsx(ExperimentalBaseCheckableLabelContext.Provider, { value: {}, children: /* @__PURE__ */ jsx(
      ExperimentalRender,
      {
        ref: forwardedRef,
        render: render ?? (renderLabel ? /* @__PURE__ */ jsx("label", {}) : /* @__PURE__ */ jsx("span", {})),
        className: classNames([renderLabel ? "group/label" : null, className]),
        ...props
      }
    ) });
  }
);
ExperimentalBaseCheckableLabel.displayName = "ExperimentalBaseCheckableLabel";
export {
  ExperimentalBaseCheckable,
  ExperimentalBaseCheckableBox,
  ExperimentalBaseCheckableLabel
};
