import React__default, { useState, useId, useEffect, forwardRef } from 'react';
import { _ as __rest } from '../tslib.es6-es.js';
import classnames from 'classnames';
import { useFormContext, useForm, Controller } from 'react-hook-form';
import { I as Icon } from '../Icon-es.js';
import { T as Text } from '../Text-es.js';
import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
import '@jobber/design';
import '../Typography-es.js';

var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};

function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
    const { control, setValue, watch } = useFormContext() != undefined
        ? useFormContext()
        : // If there isn't a Form Context being provided, get a form for this field.
            useForm({ mode: "onTouched" });
    const [identifier] = useState(useId());
    /**
     * Generate a name if one is not supplied, this is the name
     * that will be used for react-hook-form and not neccessarily
     * attached to the DOM
     */
    const [controlledName] = useState(name ? name : `generatedName--${identifier}`);
    useEffect(() => {
        if (value != undefined) {
            setValue(controlledName, value);
        }
    }, [value, watch(controlledName)]);
    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
    const inputClassName = classnames(styles.input, {
        [styles.indeterminate]: indeterminate,
    });
    const iconName = indeterminate ? "minus2" : "checkmark";
    const labelText = label ? React__default.createElement(Text, null, label) : children;
    return (React__default.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = __rest(_b, ["onChange", "name"]);
            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
            return (React__default.createElement("div", { className: styles.checkBoxParent },
                React__default.createElement("label", { className: wrapperClassName },
                    React__default.createElement("span", { className: styles.checkHolder },
                        React__default.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
                        React__default.createElement("span", { className: styles.checkBox },
                            React__default.createElement(Icon, { name: iconName, color: "surface" }))),
                    labelText && React__default.createElement("span", { className: styles.label }, labelText)),
                description && (React__default.createElement("div", { className: styles.description },
                    React__default.createElement(Text, { variation: "subdued", size: "small" }, description)))));
            function handleChange(event) {
                const newChecked = event.currentTarget.checked;
                onChange && onChange(newChecked);
                onControllerChange(event);
            }
        } }));
}

const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal(props, ref) {
    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
    const descriptionIdentifier = useId();
    const descriptionVisible = Boolean(description);
    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
    const isInvalid = Boolean(invalid);
    const inputClassName = classnames(styles.input, {
        [styles.indeterminate]: indeterminate,
    });
    const dataAttrs = filterDataAttributes(props);
    const iconName = indeterminate ? "minus2" : "checkmark";
    const labelContent = typeof label === "string" ? React__default.createElement(Text, null, label) : label;
    const descriptionContent = typeof description === "string" ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
    function handleChange(event) {
        const newChecked = event.currentTarget.checked;
        onChange === null || onChange === void 0 ? void 0 : onChange(newChecked, event);
    }
    return (React__default.createElement("div", { className: styles.checkBoxParent },
        React__default.createElement("label", { className: wrapperClassName },
            React__default.createElement("span", { className: styles.checkHolder },
                React__default.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                        ? descriptionIdentifier
                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
                React__default.createElement("span", { className: styles.checkBox },
                    React__default.createElement(Icon, { name: iconName, color: "surface" }))),
            labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
        description && (React__default.createElement("div", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
});
CheckboxRebuilt.displayName = "CheckboxRebuilt";

function isNewCheckboxProps(props) {
    return props.version === 2;
}
const Checkbox = forwardRef(function CheckboxShim(props, ref) {
    if (isNewCheckboxProps(props)) {
        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
    }
    return React__default.createElement(CheckboxLegacy, Object.assign({}, props));
});
Checkbox.displayName = "Checkbox";

export { Checkbox };
