'use strict';

var React = require('react');
var tslib_es6 = require('../tslib.es6-cjs.js');
var classnames = require('classnames');
var reactHookForm = require('react-hook-form');
var Icon = require('../Icon-cjs.js');
var Text = require('../Text-cjs.js');
var filterDataAttributes = require('../filterDataAttributes-cjs.js');
require('@jobber/design');
require('../Typography-cjs.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 } = reactHookForm.useFormContext() != undefined
        ? reactHookForm.useFormContext()
        : // If there isn't a Form Context being provided, get a form for this field.
            reactHookForm.useForm({ mode: "onTouched" });
    const [identifier] = React.useState(React.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] = React.useState(name ? name : `generatedName--${identifier}`);
    React.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.createElement(Text.Text, null, label) : children;
    return (React.createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
            return (React.createElement("div", { className: styles.checkBoxParent },
                React.createElement("label", { className: wrapperClassName },
                    React.createElement("span", { className: styles.checkHolder },
                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
                        React.createElement("span", { className: styles.checkBox },
                            React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
                    labelText && React.createElement("span", { className: styles.label }, labelText)),
                description && (React.createElement("div", { className: styles.description },
                    React.createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
            function handleChange(event) {
                const newChecked = event.currentTarget.checked;
                onChange && onChange(newChecked);
                onControllerChange(event);
            }
        } }));
}

const CheckboxRebuilt = React.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 = React.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.filterDataAttributes(props);
    const iconName = indeterminate ? "minus2" : "checkmark";
    const labelContent = typeof label === "string" ? React.createElement(Text.Text, null, label) : label;
    const descriptionContent = typeof description === "string" ? (React.createElement(Text.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.createElement("div", { className: styles.checkBoxParent },
        React.createElement("label", { className: wrapperClassName },
            React.createElement("span", { className: styles.checkHolder },
                React.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.createElement("span", { className: styles.checkBox },
                    React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
            labelContent && React.createElement("span", { className: styles.label }, labelContent)),
        description && (React.createElement("div", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
});
CheckboxRebuilt.displayName = "CheckboxRebuilt";

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

exports.Checkbox = Checkbox;
