import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useId, useState, useRef, useEffect } from 'react';
import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
import { checkboxTheme } from './Checkbox.theme.js';
import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
import { cn } from '../../../utils/cn.js';
import { useCheckboxGroupContext } from './CheckboxContext.js';
import { CheckboxGroup } from './CheckboxGroup.js';
import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.animations.js';

/**
 * Checkbox component for selecting one or more options
 */
const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
    var _a, _b, _c, _d;
    const autoId = useId();
    const shouldReduceMotion = useReducedMotion();
    const groupContext = useCheckboxGroupContext();
    // Resolve props from group context or individual props
    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
    const isDisabled = state === "disabled";
    // Determine checked state
    const isInGroup = groupContext !== undefined;
    const [internalChecked, setInternalChecked] = useState(false);
    let isChecked;
    if (isInGroup) {
        isChecked = groupContext.value.includes(value);
    }
    else if (controlledChecked !== undefined) {
        isChecked = controlledChecked;
    }
    else {
        isChecked = internalChecked;
    }
    const inputRef = useRef(null);
    // Set indeterminate property on the input element
    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.indeterminate = indeterminate;
        }
    }, [indeterminate]);
    const handleChange = (e) => {
        if (isDisabled)
            return;
        if (isInGroup) {
            groupContext.onChange(value, e.target.checked);
        }
        else if (controlledChecked === undefined) {
            setInternalChecked(e.target.checked);
        }
        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
    };
    return (jsxs("div", { className: cn(checkboxTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]), children: [jsx("input", { ref: (node) => {
                            inputRef.current = node;
                            if (typeof ref === "function")
                                ref(node);
                            else if (ref)
                                ref.current = node;
                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-white", size === "sm" ? "size-3" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
});
CheckboxComponent.displayName = "Checkbox";
const Checkbox = Object.assign(CheckboxComponent, {
    Group: CheckboxGroup,
});

export { Checkbox };
