import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { useTheme } from "../../contexts/ThemeContext";
export const Loader = ({ isLoading = false, text, children, keepContentWhileLoading, contentLoadingNode, overlayClassName, }) => {
    const { theme } = useTheme();
    const displayText = text;
    // Clases por defecto del overlay (negro semitransparente con blur)
    const defaultOverlayClasses = "bg-black/50 backdrop-blur-sm";
    // Combinar clases por defecto con las personalizadas
    const overlayClasses = overlayClassName
        ? overlayClassName
        : defaultOverlayClasses;
    // Barra de progreso infinita
    const ProgressBar = () => {
        // Variable CSS para el gradiente del color primario
        const gradientColor = `no-repeat linear-gradient(${theme.colors.primary} 0 0)`;
        const bgSecondary = theme.colors.bgSecondary || theme.colors.gray100;
        return (_jsxs("div", { className: "flex flex-col items-center gap-0.5 w-full", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "h-1 w-full rounded", style: {
                        "--c": gradientColor,
                        background: `var(--c), var(--c), ${bgSecondary}`,
                        backgroundSize: "60% 100%",
                        animation: "l16 3s infinite",
                    } }), displayText && (_jsx("span", { className: "text-xs text-[var(--color-text-secondary)] font-[var(--font-default)]", children: displayText }))] }));
    };
    // Si no está cargando, mostrar solo children (si existen)
    if (!isLoading) {
        return _jsx(_Fragment, { children: children });
    }
    // Variante 1: Con contentLoadingNode
    if (contentLoadingNode) {
        return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: keepContentWhileLoading ? "opacity-50 pointer-events-none" : "", children: contentLoadingNode }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none px-4", children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] pointer-events-auto w-full", children: _jsx(ProgressBar, {}) }) })] }));
    }
    // Variante 2: Con children pero sin contentLoadingNode
    if (children) {
        // Si keepContentWhileLoading es true, mostrar children con overlay
        if (keepContentWhileLoading) {
            return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) })] }));
        }
        // Si no tiene keepContentWhileLoading, ocultar children y mostrar solo loader básico
        return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));
    }
    // Variante 3: Sin contentLoadingNode ni children - solo loader
    return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));
};
