import {
  ErrorMessage
} from "./chunk-MZJT3USG.js";
import {
  Stack
} from "./chunk-XH3OJQMW.js";
import {
  Icon
} from "./chunk-TKIP5Q5H.js";
import {
  useValidationClasses
} from "./chunk-DYOFXXZD.js";
import {
  spaceDelimitedList
} from "./chunk-DTWRSP5P.js";

// src/components/Checkbox/Checkbox.tsx
import { useRef, useId, useState, useEffect } from "react";
import classNames from "classnames/dedupe";
import { squareTick, square } from "@simplybusiness/icons";
import "@simplybusiness/mobius/src/components/Checkbox/Checkbox.css";
import { jsx, jsxs } from "react/jsx-runtime";
var Checkbox = ({ ref, ...props }) => {
  const {
    id,
    label,
    isDisabled,
    isRequired,
    isInvalid,
    onChange,
    className,
    errorMessage,
    selected,
    defaultSelected = false,
    isReadOnly,
    isLastItem,
    name,
    value,
    ["aria-describedby"]: ariaDescribedBy,
    ...rest
  } = props;
  const [checked, setChecked] = useState(defaultSelected);
  const fallbackRef = useRef(null);
  const refObj = ref || fallbackRef;
  const inputId = useId();
  const isControlled = typeof selected === "boolean";
  useEffect(() => {
    if (isControlled) {
      setChecked(selected);
    }
  }, [selected, isControlled]);
  const validationClasses = useValidationClasses({ isInvalid });
  const sharedClasses = classNames(
    {
      "--is-disabled": isDisabled,
      "--is-selected": checked,
      "--is-required": typeof isRequired === "boolean" && isRequired,
      "--is-optional": typeof isRequired === "boolean" && !isRequired
    },
    validationClasses
  );
  const wrapperClasses = classNames(
    "mobius",
    "mobius-checkbox",
    sharedClasses,
    className
  );
  const labelClasses = classNames("mobius-checkbox__label", sharedClasses);
  const inputClasses = classNames("mobius-checkbox__input", sharedClasses);
  const iconClasses = classNames("mobius-checkbox__icon", sharedClasses);
  const errorMessageId = useId();
  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
  const describedBy = spaceDelimitedList([
    shouldErrorMessageShow,
    ariaDescribedBy
  ]);
  const labelId = useId();
  const handleChange = (event) => {
    setChecked(!checked);
    if (onChange) {
      onChange(event, isLastItem);
    }
  };
  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", className: wrapperClasses, children: [
    /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          "aria-describedby": describedBy,
          "aria-errormessage": shouldErrorMessageShow,
          "aria-invalid": isInvalid,
          "aria-labelledby": labelId,
          readOnly: isReadOnly,
          disabled: isDisabled,
          ref: refObj,
          className: inputClasses,
          onChange: handleChange,
          type: "checkbox",
          checked,
          required: isRequired,
          id: id || inputId,
          name,
          value,
          ...rest
        }
      ),
      /* @__PURE__ */ jsx(
        Icon,
        {
          icon: checked ? squareTick : square,
          size: "md",
          className: iconClasses
        }
      ),
      /* @__PURE__ */ jsx("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
    ] }),
    /* @__PURE__ */ jsx(ErrorMessage, { id: errorMessageId, errorMessage })
  ] });
};
Checkbox.displayName = "Checkbox";

export {
  Checkbox
};
//# sourceMappingURL=chunk-2VEO5SSY.js.map
