import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Card, Loader, Button, Input } from "../index";
const LoaderDocs = () => {
    const [isLoading1, setIsLoading1] = useState(false);
    const [isLoading2, setIsLoading2] = useState(false);
    const [isLoading3, setIsLoading3] = useState(false);
    const [isLoading4, setIsLoading4] = useState(false);
    const [isLoading5, setIsLoading5] = useState(false);
    const [isLoading6, setIsLoading6] = useState(false);
    // Componente Skeleton para el ejemplo
    const SkeletonCard = () => (_jsx(Card, { title: "Cargando contenido...", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-3/4" }), _jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-full" }), _jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-5/6" })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" })] }), _jsx("div", { className: "h-10 bg-[var(--color-bg-secondary)] rounded animate-pulse w-1/3" })] }) }));
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Loader - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader b\u00E1sico, sin children" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando no hay children ni contentLoadingNode, el Loader muestra \u00FAnicamente la barra de progreso y el texto. Ideal para pantallas de carga completas." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-spinner", onClick: () => {
                                            setIsLoading1(true);
                                            setTimeout(() => setIsLoading1(false), 3000);
                                        }, children: "Mostrar Loader B\u00E1sico" }), _jsx(Loader, { isLoading: isLoading1 })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader b\u00E1sico con texto personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el texto que se muestra debajo de la barra de progreso usando la prop ", _jsx("code", { children: "text" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-file-upload", onClick: () => {
                                            setIsLoading2(true);
                                            setTimeout(() => setIsLoading2(false), 3000);
                                        }, children: "Mostrar Loader con Texto Personalizado" }), _jsx(Loader, { isLoading: isLoading2, text: "Subiendo archivo... Por favor espera." })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children pero sin contentLoadingNode ni keepContentWhileLoading" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando hay children pero no contentLoadingNode, el Loader muestra los children con un overlay semitransparente y la barra de progreso centrada. Los eventos del mouse y teclado se deshabilitan en los children." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-layer-group", onClick: () => {
                                            setIsLoading3(true);
                                            setTimeout(() => setIsLoading3(false), 3000);
                                        }, children: "Mostrar Loader con Overlay" }), _jsx(Loader, { isLoading: isLoading3, children: _jsx(Card, { title: "Contenido con Loader", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "keepContentWhileLoading" }), " los children mantienen su opacidad normal pero siguen deshabilitados para interacci\u00F3n."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-eye", onClick: () => {
                                            setIsLoading4(true);
                                            setTimeout(() => setIsLoading4(false), 3000);
                                        }, children: "Mostrar Loader (mantener contenido visible)" }), _jsx(Loader, { isLoading: isLoading4, keepContentWhileLoading: true, children: _jsx(Card, { title: "Contenido Visible Durante Carga", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "B\u00FAsqueda", placeholder: "Buscar productos...", icon: "fa-search" }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y contentLoadingNode (skeleton)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona ", _jsx("code", { children: "contentLoadingNode" }), ", los children se ocultan y se muestra el nodo personalizado con el loader centrado encima. En este ejemplo usamos un skeleton para mostrar el contenido que se est\u00E1 cargando."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-image", onClick: () => {
                                            setIsLoading5(true);
                                            setTimeout(() => setIsLoading5(false), 3000);
                                        }, children: "Mostrar Loader con Skeleton" }), _jsx(Loader, { isLoading: isLoading5, contentLoadingNode: _jsx(SkeletonCard, {}), children: _jsx(Card, { title: "Contenido Real (oculto durante carga)", children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es el contenido real que se mostrar\u00E1 cuando termine la carga." }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading pero cambiando el color del overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el overlay usando la prop", " ", _jsx("code", { children: "overlayClassName" }), " con clases de Tailwind. \u00DAtil para adaptar el loader a diferentes fondos de interfaz, cambiar el border radius, padding, color, etc. En este ejemplo usamos un overlay blanco semitransparente con border radius personalizado."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-palette", onClick: () => {
                                            setIsLoading6(true);
                                            setTimeout(() => setIsLoading6(false), 3000);
                                        }, children: "Mostrar Loader (Overlay Blanco)" }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx(Loader, { isLoading: isLoading6, keepContentWhileLoading: true, overlayClassName: "bg-white/50 backdrop-blur-sm rounded-lg", children: _jsx(Card, { title: "Contenido con Overlay Personalizado", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Campo 1", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Input, { label: "Campo 2", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso infinita:" }), " Animaci\u00F3n continua usando el color primario del tema"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tres variantes de uso:" }), " Solo loader, con overlay sobre children, o con nodo personalizado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Deshabilitaci\u00F3n de eventos:" }), " Cuando est\u00E1 cargando, deshabilita todos los eventos del mouse y teclado en los children"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay semitransparente:" }), " Similar al Dialog, con efecto blur para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Texto personalizable:" }), " Puedes cambiar el texto que se muestra debajo de la barra de progreso"] }), _jsxs("li", { children: [_jsx("strong", { children: "Integraci\u00F3n con tema:" }), " Usa el color primario del tema actual autom\u00E1ticamente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido condicional:" }), " Con keepContentWhileLoading puedes mantener el contenido visible pero deshabilitado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay personalizable:" }), " Puedes personalizar completamente el overlay usando overlayClassName con clases de Tailwind para cambiar color, border radius, padding, etc."] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Default" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Controla si el loader est\u00E1 visible" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "text" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"Cargando...\"" }), _jsx("td", { className: "p-3 text-sm", children: "Texto que se muestra debajo de la barra de progreso" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "children" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Contenido que se mostrar\u00E1 con overlay cuando isLoading es true" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "keepContentWhileLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, mantiene el contenido visible (sin reducir opacidad) pero deshabilitado" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "contentLoadingNode" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Nodo personalizado que se muestra en lugar de children cuando isLoading es true" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "overlayClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"bg-black/50 backdrop-blur-sm\"" }), _jsx("td", { className: "p-3 text-sm", children: "Clases de Tailwind para personalizar el overlay (ej: \"bg-white/50 backdrop-blur-sm rounded-lg\" para overlay blanco con border radius)" })] })] })] }) })] })] }) }) }));
};
export default LoaderDocs;
