import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useState } from 'react';
import { FormLabel } from '../FormLabel/FormLabel.js';
import { motion } from 'motion/react';
import { switchTheme, thumbPositions } from './Switch.theme.js';
import { cn } from '../../../utils/cn.js';

/**
 * Switch component for toggling between two states
 */
const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onChange, label, description, state = "default", labelPosition = "end", theme, className, ...rest }, ref) => {
    const [internalChecked, setInternalChecked] = useState(false);
    // Determine if component is controlled or uncontrolled
    const isControlled = controlledChecked !== undefined;
    const isChecked = isControlled ? controlledChecked : internalChecked;
    // Derive state flags
    const isDisabled = state === "disabled";
    const isInvalid = state === "invalid";
    const handleChange = (e) => {
        if (isDisabled)
            return;
        if (!isControlled) {
            setInternalChecked(e.target.checked);
        }
        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
    };
    const handleTrackClick = () => {
        if (!isDisabled) {
            const newValue = !isChecked;
            if (!isControlled) {
                setInternalChecked(newValue);
            }
            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
        }
    };
    // Label and description content
    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label &&
                (typeof label === "string" ? (jsx(FormLabel, { htmlFor: id, state: state, children: label })) : (label)), description &&
                (typeof description === "string" ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
    // Build data attributes for state-based styling
    const trackDataState = isDisabled
        ? "disabled"
        : isInvalid
            ? "invalid"
            : isChecked
                ? "checked"
                : "unchecked";
    const filterId = `switch-liquid-lens-${id}`;
    // Switch toggle component
    const switchToggle = (jsxs("div", { className: "relative flex items-center h-6", children: [jsx("input", { ref: ref, type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }), jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), jsx("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsxs(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb, ""), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled ? undefined : { scale: 1.15 }, style: { filter: `url(#${filterId})` }, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
                                backdropFilter: "blur(0.6px)",
                                WebkitBackdropFilter: "blur(0.6px)",
                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/80", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
                                boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
                            }, "aria-hidden": "true" })] }) })] }));
    return (jsxs("div", { className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className), ...rest, children: [labelContent, switchToggle] }));
});
Switch.displayName = "Switch";

export { Switch };
