"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { FormMessageContainer } from "./FormMessageContainer.js";
import { InputToggleIcon } from "./InputToggleIcon.js";
import { Label } from "./Label.js";
/**
 * **Client Component**
 *
 * @remarks \@since 6.0.0 Now supports the `FormMessage` behavior and requires
 * different icons for each checked state.
 */ export const InputToggle = /*#__PURE__*/ forwardRef(function InputToggle(props, ref) {
    const { id: propId, type, label, labelProps, style, className, autoComplete = type === "checkbox" ? "off" : undefined, disableLabelGap = false, stacked = false, iconAfter = false, size = "normal", error = false, active = false, indeterminate = false, messageProps, messageContainerProps, icon, checkedIcon, indeterminateIcon, iconProps, iconStyle, iconClassName, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onDragStart, onMouseUp, onTouchEnd, onTouchMove, onTouchStart, ...remaining } = props;
    const { disabled = false, checked } = props;
    const id = useEnsuredId(propId, type);
    const { pressedClassName, ripples, handlers } = useElementInteraction({
        disabled,
        onBlur,
        onClick,
        onKeyDown,
        onKeyUp,
        onMouseDown,
        onMouseLeave,
        onDragStart,
        onMouseUp,
        onTouchEnd,
        onTouchMove,
        onTouchStart
    });
    // set on the `remaining` object to bypass the eslint rule about
    // aria-checked not being valid for textbox role
    remaining["aria-checked"] = remaining["aria-checked"] ?? indeterminate ? "mixed" : undefined;
    return /*#__PURE__*/ _jsx(FormMessageContainer, {
        ...messageContainerProps,
        messageProps: messageProps,
        children: /*#__PURE__*/ _jsxs(Label, {
            ...labelProps,
            gap: !disableLabelGap,
            style: style,
            stacked: stacked,
            reversed: !iconAfter,
            active: active,
            error: error,
            disabled: disabled,
            className: className,
            children: [
                label,
                /*#__PURE__*/ _jsxs(InputToggleIcon, {
                    style: iconStyle,
                    ...iconProps,
                    className: cnb(pressedClassName, iconClassName, iconProps?.className),
                    error: error,
                    checked: checked,
                    disabled: disabled,
                    size: size,
                    type: type,
                    icon: icon,
                    checkedIcon: checkedIcon,
                    indeterminate: indeterminate,
                    indeterminateIcon: indeterminateIcon,
                    children: [
                        /*#__PURE__*/ _jsx("input", {
                            ...remaining,
                            ...handlers,
                            autoComplete: autoComplete,
                            id: id,
                            ref: ref,
                            type: type,
                            className: "rmd-hidden-input"
                        }),
                        ripples
                    ]
                })
            ]
        })
    });
});

//# sourceMappingURL=InputToggle.js.map