function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import Text from "../../atoms/text/text";
import Icon from "../../atoms/icon/icon";
import Pressable from "../../atoms/pressable/pressable";
import { useMolecularComponentConfig } from "../../../hooks/useMolecularComponentConfig";
import Stack from "../../atoms/stack/stack";
import { useCheckBoxGroup } from "./checkbox-group";
import { boxStyleFunctions } from "../../../theme/src/style-functions";
import { useInvalidState } from "../../../hooks/state/useInvalidState";
import { useCheckedState } from "../../../hooks/state/useCheckedState";
import { useDisabledState } from "../../../hooks";
import Center from "../../atoms/center/center";
/** The Checkbox component is used in forms when a user needs to select multiple values from several options. **/
const CheckBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  onPress = () => {},
  ...rest
}, checkboxRef) => {
  const {
    size,
    variant,
    isDisabled,
    colorScheme,
    shape,
    checkboxGroupValue,
    addCheckBoxGroupValue,
    deleteCheckBoxGroupValue
  } = useCheckBoxGroup();

  // Overwrite props from checkbox group
  rest.size = rest.size ?? size;
  rest.variant = rest.variant ?? variant;
  rest.isDisabled = rest.isDisabled ?? isDisabled;
  rest.colorScheme = rest.colorScheme ?? colorScheme;
  rest.shape = rest.shape ?? shape;
  const isCheckBoxInGroup = addCheckBoxGroupValue !== undefined;
  const isCheckBoxChecked = isCheckBoxInGroup ? checkboxGroupValue?.includes(rest.value) && rest.value !== undefined : rest.isChecked;
  const molecularProps = useMolecularComponentConfig("CheckBox", rest, {
    size: rest.size,
    variant: rest.variant
  }, rest.colorScheme, boxStyleFunctions, "container", "box", "container");
  const {
    atoms
  } = molecularProps;

  // Use state for dynamic style
  const {
    propsWithCheckedStyles: propsWithCheckedStylesForBox
  } = useCheckedState(atoms.box, boxStyleFunctions, "molecule", true, isCheckBoxChecked);
  atoms.box = propsWithCheckedStylesForBox;
  const {
    propsWithCheckedStyles: propsWithCheckedStylesForIcon
  } = useCheckedState(atoms.icon, boxStyleFunctions, "molecule", true, isCheckBoxChecked);
  atoms.icon = propsWithCheckedStylesForIcon;
  const {
    propsWithInvalidStyles
  } = useInvalidState(atoms.box, boxStyleFunctions, "molecule", true, rest.isInvalid);
  atoms.box = propsWithInvalidStyles;
  const {
    propsWithDisabledStyles
  } = useDisabledState(atoms.container, boxStyleFunctions, "molecule", true, rest.isDisabled);
  atoms.container = propsWithDisabledStyles;

  // OTHER METHODS
  const checkboxPressHandler = () => {
    if (isCheckBoxInGroup) {
      // Add the value to the group if the checkbox is currently unchecked
      if (!isCheckBoxChecked) addCheckBoxGroupValue(rest.value);else deleteCheckBoxGroupValue(rest.value);
      if (onPress) onPress();
    }
    if (onPress) onPress();
  };
  return /*#__PURE__*/React.createElement(Pressable, _extends({}, atoms.container, {
    ref: checkboxRef,
    onPress: checkboxPressHandler,
    accessible: true,
    accessibilityRole: "checkbox",
    isDisabled: rest.isDisabled,
    accessibilityLabel: rest.accessibilityLabel ? rest.accessibilityLabel : children,
    accessibilityState: {
      disabled: rest.isDisabled,
      checked: isCheckBoxChecked
    },
    accessibilityHint: rest.accessibilityHint
  }), /*#__PURE__*/React.createElement(Stack, {
    spacing: rest.spacing || atoms.container.spacing,
    direction: "horizontal"
  }, /*#__PURE__*/React.createElement(Center, _extends({}, atoms.box, {
    borderRadius: atoms.box.shape === "circle" ? "full" : atoms.box.borderRadius
  }), /*#__PURE__*/React.createElement(Icon, _extends({}, atoms.icon, {
    iconFamily: rest.isIndeterminate ? rest.indeterminateIconFamily ?? atoms.box.indeterminateIconFamily ?? "Ionicons" : rest.checkedIconFamily ?? atoms.box.checkedIconFamily ?? "Ionicons",
    iconName: rest.isIndeterminate ? rest.indeterminateIconName ?? atoms.box.indeterminateIconName ?? "remove-outline" : rest.checkedIconName ?? atoms.box.checkedIconName ?? "checkmark-sharp"
  }))), !!children && /*#__PURE__*/React.createElement(Text, atoms.text, children)));
}));
CheckBox.displayName = "CheckBox";
export default CheckBox;
//# sourceMappingURL=checkbox.js.map