import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useState, useCallback, useEffect } from "react";
import classnames from "classnames";
import CheckboxIcon from "./CheckboxIcon";
import { StyledCheckbox, StyledInput, StyledLabel } from "./Styles";
/**
 * Checkbox component
 */
export const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    className,
    hover,
    id = "checkbox",
    mixed = false,
    checked,
    onChange,
    disabled,
    ...rest
  } = _ref;
  const [indeterminate, setIndeterminate] = useState(mixed && !checked);
  const [initialChecked, setInitialChecked] = useState(checked);
  const handleChange = useCallback(e => {
    typeof onChange === "function" && onChange(e);
    setInitialChecked(prev => !prev);
    setIndeterminate(false);
  }, [onChange]);
  useEffect(() => {
    if (checked !== initialChecked) {
      setInitialChecked(checked);
      setIndeterminate(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [checked]);
  useEffect(() => {
    if (mixed !== indeterminate && !checked) {
      setIndeterminate(mixed);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mixed]);
  return /*#__PURE__*/React.createElement(StyledCheckbox, {
    className: classnames("c-checkbox", {
      "c-checkbox__hover": hover,
      "c-checkbox__controlled": typeof hover === "boolean"
    }, className),
    hover: hover,
    tabIndex: -1,
    mixed: indeterminate,
    $disabled: disabled
  }, /*#__PURE__*/React.createElement(StyledInput, _extends({
    role: "checkbox",
    id: id,
    className: "c-checkbox--input",
    type: "checkbox",
    ref: ref
  }, rest, {
    checked: initialChecked,
    onChange: handleChange,
    disabled: disabled
  })), /*#__PURE__*/React.createElement(StyledLabel, {
    htmlFor: id,
    className: "c-checkbox--label"
  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
    "data-testid": "checkbox-icon",
    height: 16,
    width: 16,
    mixed: indeterminate
  })));
});
Checkbox.displayName = "Checkbox";
//# sourceMappingURL=Checkbox.js.map