import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useContext, createContext, useState, useMemo, useId, forwardRef, useLayoutEffect, useRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { a as CheckboxGroup, C as Checkbox } from './Checkbox-C3rtd-Xe.js';
import { a as RadioGroup, R as Radio, S as SvgRadioButtonChecked, b as SvgRadioButtonUnchecked } from './Radio-dyLcVmUw.js';
import { C as Card } from './Card-Bt0F6RTq.js';
import { I as Icon } from './Icon-B4uCvMU9.js';
import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';

import './SelectCard.css';const SelectCardContext = createContext(null);
const useSelectCardContext = () => useContext(SelectCardContext);

const SelectCardProvider = ({
  children,
  defaultValue,
  onChange,
  selectionMode,
  showSelectIndicator,
  value
}) => {
  const isControlled = value !== void 0;
  const [internalSelection, setInternalSelection] = useState(() => {
    const ids = defaultValue ?? [];
    return new Set(selectionMode === "single" ? ids.slice(0, 1) : ids);
  });
  const selection = useMemo(() => {
    if (!isControlled) return internalSelection;
    const ids = value ?? [];
    return new Set(selectionMode === "single" ? ids.slice(0, 1) : ids);
  }, [isControlled, value, internalSelection, selectionMode]);
  const radioName = useId();
  const handleChange = (e, state, options) => {
    if (!state || !state.id) {
      if (!options?.internal) {
        onChange?.(e, state);
      }
      return;
    }
    if (!isControlled) {
      if (selectionMode === "single") {
        setInternalSelection(state.checked ? /* @__PURE__ */ new Set([state.id]) : /* @__PURE__ */ new Set());
      } else {
        setInternalSelection((prev) => {
          const next = new Set(prev);
          if (state.checked) {
            next.add(state.id);
          } else {
            next.delete(state.id);
          }
          return next;
        });
      }
    }
    if (!options?.internal) {
      onChange?.(e, state);
    }
  };
  const context = {
    hasGroupDefault: defaultValue !== void 0,
    isGroupControlled: isControlled,
    selectionMode,
    onChange: handleChange,
    radioName,
    selection,
    showSelectIndicator
  };
  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: context, children });
};

const SelectCardGroup = forwardRef((props, _ref) => {
  const {
    ariaLabelledBy,
    children,
    defaultValue,
    legend,
    legendProps,
    moreInfo,
    onChange,
    required = false,
    selectionMode,
    showSelectIndicator = false,
    value,
    ...rest
  } = props;
  return /* @__PURE__ */ jsxs(
    SelectCardProvider,
    {
      defaultValue,
      onChange,
      selectionMode,
      showSelectIndicator,
      value,
      children: [
        selectionMode === "multiple" && /* @__PURE__ */ jsx(
          CheckboxGroup,
          {
            "aria-labelledby": ariaLabelledBy,
            legend,
            legendProps,
            required,
            moreInfo,
            ...rest,
            children
          }
        ),
        selectionMode === "single" && /* @__PURE__ */ jsx(
          RadioGroup,
          {
            "aria-labelledby": ariaLabelledBy,
            legend,
            legendProps,
            required,
            moreInfo,
            ...rest,
            children
          }
        )
      ]
    }
  );
});
SelectCardGroup.displayName = "SelectCardGroup";

const styles = {
	"select-card": "_select-card_qn7fm_1",
	"icon-wrapper": "_icon-wrapper_qn7fm_39",
	"icon-checked": "_icon-checked_qn7fm_43",
	"icon-unchecked": "_icon-unchecked_qn7fm_47",
	"icon-checked-error": "_icon-checked-error_qn7fm_51",
	"icon-checked-disabled": "_icon-checked-disabled_qn7fm_55",
	"select-card-checkbox-unchecked": "_select-card-checkbox-unchecked_qn7fm_59",
	"select-card-checkbox-checked": "_select-card-checkbox-checked_qn7fm_66",
	"select-card-checkbox-error": "_select-card-checkbox-error_qn7fm_73",
	"select-card--selected": "_select-card--selected_qn7fm_113",
	"select-card--checked": "_select-card--checked_qn7fm_144",
	"select-card--errored": "_select-card--errored_qn7fm_150",
	"select-card--disabled": "_select-card--disabled_qn7fm_182",
	"select-card--remove-drop-shadow": "_select-card--remove-drop-shadow_qn7fm_187",
	"select-card-wrapper": "_select-card-wrapper_qn7fm_191",
	"select-card-label": "_select-card-label_qn7fm_195"
};

const SelectCardElement = forwardRef(
  (props, ref) => {
    const {
      checkboxProps,
      children,
      checked: checkedProp,
      className,
      defaultChecked: defaultCheckedProp,
      disabled,
      errored,
      radioProps,
      onChange,
      removeDropShadow,
      showSelectIndicator = false,
      id,
      ...rest
    } = props;
    const [checked, setChecked] = useOptionallyControlledState({
      controlledValue: checkedProp,
      defaultValue: defaultCheckedProp || false,
      onChange
    });
    const context = useSelectCardContext();
    const isCardControlled = checkedProp !== void 0;
    const isGroupControlled = context?.isGroupControlled ?? false;
    const [_, setForceRenderCount] = useState(0);
    useLayoutEffect(() => {
      const initialChecked = checkedProp ?? defaultCheckedProp;
      if (initialChecked && !isGroupControlled && !context?.hasGroupDefault) {
        context?.onChange?.(
          void 0,
          {
            id,
            checked: initialChecked
          },
          { internal: true }
        );
        setForceRenderCount((prev) => prev + 1);
      }
    }, []);
    const isFirstRender = useRef(true);
    useLayoutEffect(() => {
      if (isFirstRender.current) {
        isFirstRender.current = false;
        return;
      }
      if (isCardControlled && context) {
        if (context.selectionMode === "single" && !checkedProp) {
          return;
        }
        context.onChange?.(
          void 0,
          {
            id,
            checked: checkedProp
          },
          { internal: true }
        );
      }
    }, [checkedProp]);
    const handleChange = (event) => {
      const newChecked = event ? event.target.checked : false;
      setChecked(newChecked);
      context?.onChange?.(event, {
        id,
        checked: newChecked
      });
    };
    const isChecked = context ? context.selection.has(id) : checked;
    const showIndicator = context?.showSelectIndicator || showSelectIndicator;
    const inputChecked = isGroupControlled ? isChecked : isCardControlled ? checkedProp : void 0;
    const inputDefaultChecked = isGroupControlled || isCardControlled ? void 0 : context?.hasGroupDefault ? context.selection.has(id) : defaultCheckedProp;
    const contentClassName = cx(styles["select-card"], className, {
      [styles["select-card--remove-drop-shadow"]]: removeDropShadow,
      [styles["select-card--checked"]]: isChecked,
      [styles["select-card--selected"]]: isChecked && !errored,
      [styles["select-card--errored"]]: errored,
      [styles["select-card--disabled"]]: disabled
    });
    const iconClassNames = cx({
      [styles["icon-checked"]]: isChecked && !errored && !disabled,
      [styles["icon-unchecked"]]: !isChecked && !disabled,
      [styles["icon-checked-error"]]: errored && !disabled,
      [styles["icon-checked-disabled"]]: disabled
    });
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      (!context || context?.selectionMode === "multiple") && /* @__PURE__ */ jsx(
        Checkbox,
        {
          ...checkboxProps,
          className: cx(
            styles["select-card-wrapper"],
            checkboxProps?.className,
            {
              [styles["select-card-checkbox-unchecked"]]: !isChecked && !errored,
              [styles["select-card-checkbox-checked"]]: isChecked && !errored,
              [styles["select-card-checkbox-error"]]: errored
            }
          ),
          labelWrapperClassName: styles["select-card-label"],
          checked: inputChecked,
          defaultChecked: inputDefaultChecked,
          onChange: handleChange,
          disabled,
          ref,
          label: /* @__PURE__ */ jsx(
            Card,
            {
              ...rest,
              className: contentClassName,
              flex: showIndicator ? "1" : void 0,
              gap: showIndicator ? "2" : void 0,
              alignItems: showIndicator ? "flex-start" : void 0,
              children: showIndicator ? /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsx("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
                  Icon,
                  {
                    size: "large",
                    svg: isChecked ? SvgCheckBox : SvgCheckBoxOutlineBlank,
                    className: iconClassNames
                  }
                ) }),
                children
              ] }) : children
            }
          ),
          hideCheckbox: true
        }
      ),
      context?.selectionMode === "single" && /* @__PURE__ */ jsx(
        Radio,
        {
          ...radioProps,
          className: cx(
            styles["select-card-wrapper"],
            radioProps?.className,
            {
              [styles["select-card-checkbox-unchecked"]]: !isChecked && !errored,
              [styles["select-card-checkbox-checked"]]: isChecked && !errored,
              [styles["select-card-checkbox-error"]]: errored
            }
          ),
          labelWrapperClassName: styles["select-card-label"],
          checked: inputChecked,
          defaultChecked: inputDefaultChecked,
          onChange: handleChange,
          disabled,
          ref,
          name: context.radioName,
          label: /* @__PURE__ */ jsx(
            Card,
            {
              ...rest,
              className: contentClassName,
              flex: showIndicator ? "1" : void 0,
              gap: showIndicator ? "2" : void 0,
              alignItems: showIndicator ? "flex-start" : void 0,
              children: showIndicator ? /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsx("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
                  Icon,
                  {
                    size: "large",
                    svg: isChecked ? SvgRadioButtonChecked : SvgRadioButtonUnchecked,
                    className: iconClassNames
                  }
                ) }),
                children
              ] }) : children
            }
          ),
          hideRadio: true
        }
      )
    ] });
  }
);
SelectCardElement.displayName = "SelectCard";
const SelectCard = Object.assign(SelectCardElement, {
  /**
   * SelectCardGroup component for managing groups of selectable cards.
   *
   * Features:
   * - Manages selection state for multiple SelectCard components
   * - Supports both single and multiple selection modes
   * - Provides proper accessibility with legends and ARIA labels
   * - Handles required field validation
   * - Automatic radio button grouping for single selection
   * - Context provider for child SelectCard components
   *
   * @example
   * <SelectCard.Group
   *   legend="Choose your plan"
   *   selectionMode="single"
   *   onChange={(e, state) => console.log('Selection changed:', state)}
   * >
   *   <SelectCard id="basic" onChange={() => {}}>
   *     <Text variant="headline" size="small">Basic Plan</Text>
   *   </SelectCard>
   *   <SelectCard id="premium" onChange={() => {}}>
   *     <Text variant="headline" size="small">Premium Plan</Text>
   *   </SelectCard>
   * </SelectCard.Group>
   */
  Group: SelectCardGroup
});

export { SelectCard as S };
//# sourceMappingURL=SelectCard-CMSG_ba1.js.map
