import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useContext, createContext, useState, useId, forwardRef, useLayoutEffect, useRef } from 'react';
import { c as cx } from './index-SvGbrGuT.js';
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-CxjZpzPp.js';
import { R as RadioGroup, a as Radio, S as SvgRadioButtonUnchecked, b as SvgRadioButtonChecked } from './Radio-DtYoRq3m.js';
import { C as Card } from './Card-DDH7gI8m.js';
import { I as Icon } from './Icon-Bcil6aBo.js';
import { a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-B4zobNlt.js';
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';

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

const SelectCardProvider = ({
  children,
  onChange,
  selectionMode,
  showSelectIndicator
}) => {
  const [selection, setSelection] = useState(/* @__PURE__ */ new Set());
  const radioName = useId();
  const handleChange = (e, state, options) => {
    if (!state || !state.id) {
      if (!options?.internal) {
        onChange?.(e, state);
      }
      return;
    }
    if (selectionMode === "single") {
      if (state.checked) {
        setSelection(/* @__PURE__ */ new Set([state.id]));
      } else {
        setSelection(/* @__PURE__ */ new Set());
      }
    } else {
      if (state.checked) {
        setSelection(selection.add(state.id));
      } else {
        selection.delete(state.id);
        setSelection(selection);
      }
    }
    if (!options?.internal) {
      onChange?.(e, state);
    }
  };
  const context = {
    selectionMode,
    onChange: handleChange,
    radioName,
    selection,
    showSelectIndicator
  };
  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: context, children });
};

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

const styles = {
	"select-card": "_select-card_qrp9z_2",
	"icon-wrapper": "_icon-wrapper_qrp9z_20",
	"icon-checked": "_icon-checked_qrp9z_27",
	"icon-unchecked": "_icon-unchecked_qrp9z_28",
	"select-card--selected": "_select-card--selected_qrp9z_39",
	"select-card--checked": "_select-card--checked_qrp9z_55",
	"select-card--errored": "_select-card--errored_qrp9z_62",
	"select-card--disabled": "_select-card--disabled_qrp9z_70",
	"select-card--remove-drop-shadow": "_select-card--remove-drop-shadow_qrp9z_74"
};

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 isControlled = checkedProp !== void 0;
    const [_, setForceRenderCount] = useState(0);
    useLayoutEffect(() => {
      const initialChecked = checkedProp ?? defaultCheckedProp;
      if (initialChecked) {
        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 (isControlled && 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 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
    });
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      (!context || context?.selectionMode === "multiple") && /* @__PURE__ */ jsx(
        Checkbox,
        {
          ...checkboxProps,
          checked: isControlled ? checkedProp : void 0,
          defaultChecked: isControlled ? void 0 : defaultCheckedProp,
          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__ */ jsxs("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: [
                  /* @__PURE__ */ jsx(
                    Icon,
                    {
                      size: "large",
                      svg: SvgCheckBox,
                      className: styles["icon-checked"]
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Icon,
                    {
                      size: "large",
                      svg: SvgCheckBoxOutlineBlank,
                      className: styles["icon-unchecked"]
                    }
                  )
                ] }),
                children
              ] }) : children
            }
          ),
          hideCheckbox: true
        }
      ),
      context?.selectionMode === "single" && /* @__PURE__ */ jsx(
        Radio,
        {
          ...radioProps,
          checked: isControlled ? checkedProp : void 0,
          defaultChecked: isControlled ? void 0 : defaultCheckedProp,
          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__ */ jsxs("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: [
                  /* @__PURE__ */ jsx(
                    Icon,
                    {
                      size: "large",
                      svg: SvgRadioButtonUnchecked,
                      className: styles["icon-unchecked"]
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Icon,
                    {
                      size: "large",
                      svg: SvgRadioButtonChecked,
                      className: styles["icon-checked"]
                    }
                  )
                ] }),
                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-yWBNnm7t.js.map
