import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
export const Checkbox = React.forwardRef(({ label, labelPosition = "right", error, size = "md", className = "", id, readOnly = false, onClick, onChange, ...props }, ref) => {
    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
    const sizeClasses = {
        sm: "w-4 h-4",
        md: "w-5 h-5",
        lg: "w-6 h-6",
    };
    const labelSizeClasses = {
        sm: "text-sm",
        md: "text-base",
        lg: "text-lg",
    };
    const checkboxClasses = `
      ${sizeClasses[size]}
      rounded border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0
      cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
      border-[var(--color-border-default)]
      checked:bg-[var(--color-primary)] checked:border-[var(--color-primary)]
      focus:ring-[var(--color-primary)]
      ${error
        ? "border-[var(--color-border-error)] checked:border-[var(--color-border-error)] checked:bg-[var(--color-danger)]"
        : ""}
      ${className}
    `;
    const checkboxStyle = error
        ? { accentColor: "var(--color-danger)" }
        : { accentColor: "var(--color-primary)" };
    const labelClasses = `
      ${labelSizeClasses[size]}
      font-[var(--font-default)] cursor-pointer select-none
      ${props.disabled ? "opacity-50 cursor-not-allowed" : ""}
      ${error
        ? "text-[var(--color-danger)]"
        : "text-[var(--color-text-primary)]"}
    `;
    const containerClasses = `
      flex items-center gap-2
      ${labelPosition === "left" ? "flex-row-reverse" : "flex-row"}
    `;
    // Prevenir cambios cuando está en modo readOnly
    const handleClick = (e) => {
        if (readOnly) {
            e.preventDefault();
            return false;
        }
        // Llamar al onClick original si existe
        if (onClick) {
            onClick(e);
        }
    };
    const handleChange = (e) => {
        if (readOnly) {
            e.preventDefault();
            return;
        }
        // Llamar al onChange original si existe
        if (onChange) {
            onChange(e);
        }
    };
    const handleLabelClick = (e) => {
        if (readOnly) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    };
    const handleLabelMouseDown = (e) => {
        if (readOnly) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    };
    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: containerClasses, children: [_jsx("input", { ref: ref, type: "checkbox", id: checkboxId, className: checkboxClasses, style: checkboxStyle, readOnly: readOnly, onClick: handleClick, onChange: handleChange, ...props }), label && (_jsx("label", { htmlFor: readOnly ? undefined : checkboxId, className: labelClasses, onClick: handleLabelClick, onMouseDown: handleLabelMouseDown, children: label }))] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
});
Checkbox.displayName = "Checkbox";
