import { __assign, __read, __rest } from "tslib";
import React from "react";
import P2 from "../typography/P2";
import { useStateProps } from "../hooks/useStateProps";
import { CheckBoxStyled, InputStyled, IconBrokenMinusStyled, IconBrokenTickStyled } from "./styles";
var CheckBox = React.forwardRef(function (_a, ref) {
    var className = _a.className, label = _a.label, inputRef = _a.inputRef, tabIndex = _a.tabIndex, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, name = _a.name, isIndeterminate = _a.isIndeterminate, onBlur = _a.onBlur, onFocus = _a.onFocus, _b = _a.testId, testId = _b === void 0 ? "testIDWithoutName" : _b, props = __rest(_a, ["className", "label", "inputRef", "tabIndex", "isChecked", "onChange", "isDisabled", "name", "isIndeterminate", "onBlur", "onFocus", "testId"]);
    var _c = __read(useStateProps(typeof isChecked === "undefined" ? false : isChecked), 2), checked = _c[0], setChecked = _c[1];
    var handleChange = function (event) {
        setChecked(function (prevState) { return !prevState; });
        onChange === null || onChange === void 0 ? void 0 : onChange(event, !checked);
    };
    var handlePressEnter = function (event) {
        if (event.key === "Enter") {
            setChecked(function (prevState) { return !prevState; });
            onChange === null || onChange === void 0 ? void 0 : onChange(event, !checked);
        }
    };
    return (React.createElement(CheckBoxStyled, __assign({}, props, { className: className, "data-testid": testId + "_checkBox", "data-element": "checkBox", ref: ref, onClick: function (event) {
            var _a;
            event.stopPropagation();
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
        }, onMouseDown: function (e) { return e.preventDefault(); }, isDisabled: isDisabled, isIndeterminate: isIndeterminate, isChecked: checked }),
        checked && !isIndeterminate && (React.createElement(IconBrokenTickStyled, { width: 24, height: 24, className: "checkbox-icon" })),
        isIndeterminate && (React.createElement(IconBrokenMinusStyled, { width: 24, height: 24, className: "checkbox-icon" })),
        React.createElement(InputStyled, { "data-element": "checkBox-input", checked: checked, ref: inputRef, tabIndex: tabIndex, type: "checkbox", onChange: handleChange, onKeyUp: handlePressEnter, disabled: isDisabled, name: name, onFocus: onFocus, onBlur: onBlur, isIndeterminate: isIndeterminate, isChecked: checked }),
        React.createElement(P2, { type: "corvus", "data-element": "checkBox-label" }, label)));
});
CheckBox.displayName = "CheckBox";
export default CheckBox;
