"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _text = _interopRequireDefault(require("../../atoms/text/text"));
var _icon = _interopRequireDefault(require("../../atoms/icon/icon"));
var _pressable = _interopRequireDefault(require("../../atoms/pressable/pressable"));
var _useMolecularComponentConfig = require("../../../hooks/useMolecularComponentConfig");
var _stack = _interopRequireDefault(require("../../atoms/stack/stack"));
var _checkboxGroup = require("./checkbox-group");
var _styleFunctions = require("../../../theme/src/style-functions");
var _useInvalidState = require("../../../hooks/state/useInvalidState");
var _useCheckedState = require("../../../hooks/state/useCheckedState");
var _hooks = require("../../../hooks");
var _center = _interopRequireDefault(require("../../atoms/center/center"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
/** The Checkbox component is used in forms when a user needs to select multiple values from several options. **/
const CheckBox = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  onPress = () => {},
  ...rest
}, checkboxRef) => {
  const {
    size,
    variant,
    isDisabled,
    colorScheme,
    shape,
    checkboxGroupValue,
    addCheckBoxGroupValue,
    deleteCheckBoxGroupValue
  } = (0, _checkboxGroup.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 = (0, _useMolecularComponentConfig.useMolecularComponentConfig)("CheckBox", rest, {
    size: rest.size,
    variant: rest.variant
  }, rest.colorScheme, _styleFunctions.boxStyleFunctions, "container", "box", "container");
  const {
    atoms
  } = molecularProps;

  // Use state for dynamic style
  const {
    propsWithCheckedStyles: propsWithCheckedStylesForBox
  } = (0, _useCheckedState.useCheckedState)(atoms.box, _styleFunctions.boxStyleFunctions, "molecule", true, isCheckBoxChecked);
  atoms.box = propsWithCheckedStylesForBox;
  const {
    propsWithCheckedStyles: propsWithCheckedStylesForIcon
  } = (0, _useCheckedState.useCheckedState)(atoms.icon, _styleFunctions.boxStyleFunctions, "molecule", true, isCheckBoxChecked);
  atoms.icon = propsWithCheckedStylesForIcon;
  const {
    propsWithInvalidStyles
  } = (0, _useInvalidState.useInvalidState)(atoms.box, _styleFunctions.boxStyleFunctions, "molecule", true, rest.isInvalid);
  atoms.box = propsWithInvalidStyles;
  const {
    propsWithDisabledStyles
  } = (0, _hooks.useDisabledState)(atoms.container, _styleFunctions.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.default.createElement(_pressable.default, _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.default.createElement(_stack.default, {
    spacing: rest.spacing || atoms.container.spacing,
    direction: "horizontal"
  }, /*#__PURE__*/_react.default.createElement(_center.default, _extends({}, atoms.box, {
    borderRadius: atoms.box.shape === "circle" ? "full" : atoms.box.borderRadius
  }), /*#__PURE__*/_react.default.createElement(_icon.default, _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.default.createElement(_text.default, atoms.text, children)));
}));
CheckBox.displayName = "CheckBox";
var _default = exports.default = CheckBox;
//# sourceMappingURL=checkbox.js.map