import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Card, Button, SnackbarProvider, SnackbarContainer, useSnackbar, } from "../index";
// Componente wrapper para usar el hook dentro del provider
const SnackbarExamples = () => {
    const { showSnackbar } = useSnackbar();
    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los snackbars soportan las mismas variantes que el componente Badge:", _jsx("code", { children: "primary" }), ", ", _jsx("code", { children: "secondary" }), ", ", _jsx("code", { children: "success" }), ",", " ", _jsx("code", { children: "warning" }), ", ", _jsx("code", { children: "danger" }), ", e ", _jsx("code", { children: "info" }), "."] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Mensaje de información primaria", "primary"), children: "Primary" }), _jsx(Button, { variant: "outline", onClick: () => showSnackbar("Mensaje secundario", "secondary"), children: "Secondary" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Operación completada exitosamente", "success"), children: "Success" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Advertencia: revisa esta acción", "warning"), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Error al procesar la solicitud", "danger"), children: "Danger" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Información adicional disponible", "info"), children: "Info" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDconos personalizados" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes especificar un \u00EDcono personalizado usando clases de FontAwesome 5. Si no especificas un \u00EDcono, se usa uno por defecto seg\u00FAn la variante." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => showSnackbar("¡Favorito agregado!", "success", {
                                    icon: "fa-star",
                                    iconLabel: "Favorito",
                                }), children: "Con \u00EDcono estrella" }), _jsx(Button, { variant: "primary", icon: "fa-bell", onClick: () => showSnackbar("Nueva notificación recibida", "info", {
                                    icon: "fa-bell",
                                    iconLabel: "Notificación",
                                }), children: "Con \u00EDcono campana" }), _jsx(Button, { variant: "primary", icon: "fa-download", onClick: () => showSnackbar("Descarga completada", "success", {
                                    icon: "fa-download",
                                    iconLabel: "Descarga",
                                }), children: "Con \u00EDcono descarga" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => showSnackbar("Cambios guardados correctamente", "success", {
                                    icon: "fa-save",
                                    iconLabel: "Guardado",
                                }), children: "Con \u00EDcono guardar" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Duraci\u00F3n personalizada" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Por defecto, los snackbars se muestran durante 3 segundos. Puedes personalizar la duraci\u00F3n en milisegundos. Usa ", _jsx("code", { children: "0" }), " para que no se cierren autom\u00E1ticamente."] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar dura 2 segundos", "info", {
                                    duration: 2000,
                                }), children: "2 segundos" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar dura 10 segundos", "warning", {
                                    duration: 10000,
                                }), children: "10 segundos" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar no se cierra automáticamente", "success", {
                                    duration: 0,
                                }), children: "Sin auto-cierre" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Mensajes largos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los snackbars tienen un ancho fijo de 18rem. Los mensajes largos se ajustan autom\u00E1ticamente ocupando varios renglones sin estirar el snackbar." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este es un mensaje muy largo que debería ocupar varios renglones en el snackbar sin estirarlo, manteniendo el ancho fijo de 18rem.", "info"), children: "Mensaje largo" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este es otro ejemplo de mensaje extenso que demuestra cómo el texto se ajusta automáticamente dentro del snackbar, permitiendo que el contenido sea legible sin afectar el diseño.", "warning", {
                                    icon: "fa-exclamation-triangle",
                                }), children: "Mensaje muy largo" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "M\u00FAltiples snackbars" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes mostrar m\u00FAltiples snackbars simult\u00E1neamente. Los nuevos aparecen abajo y los antiguos arriba. La barra de progreso se pausa cuando pasas el mouse sobre un snackbar." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => {
                                    showSnackbar("Primer snackbar", "success");
                                    setTimeout(() => showSnackbar("Segundo snackbar", "info"), 500);
                                    setTimeout(() => showSnackbar("Tercer snackbar", "warning"), 1000);
                                }, children: "Mostrar 3 snackbars" }), _jsx(Button, { variant: "primary", onClick: () => {
                                    for (let i = 1; i <= 5; i++) {
                                        setTimeout(() => showSnackbar(`Snackbar número ${i}`, "primary", {
                                            duration: 3000,
                                        }), i * 300);
                                    }
                                }, children: "Mostrar 5 snackbars" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Casos de uso comunes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Operaci\u00F3n exitosa" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => showSnackbar("Los cambios se guardaron correctamente", "success", {
                                            icon: "fa-check-circle",
                                        }), children: "Guardar cambios" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Error de validaci\u00F3n" }), _jsx(Button, { variant: "primary", icon: "fa-exclamation-triangle", onClick: () => showSnackbar("Por favor, completa todos los campos requeridos", "danger", {
                                            icon: "fa-times-circle",
                                            duration: 6000,
                                        }), children: "Validar formulario" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Informaci\u00F3n importante" }), _jsx(Button, { variant: "primary", icon: "fa-info-circle", onClick: () => showSnackbar("Tu sesión expirará en 5 minutos. Guarda tu trabajo.", "warning", {
                                            icon: "fa-clock",
                                            duration: 8000,
                                        }), children: "Mostrar advertencia" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones del contenedor" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El ", _jsx("code", { children: "SnackbarContainer" }), " puede posicionarse en diferentes lugares de la pantalla. En esta documentaci\u00F3n est\u00E1 configurado en", " ", _jsx("code", { children: "top-right" }), ". Las opciones disponibles son:"] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm mb-4", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("code", { children: "top-right" }), " - Esquina superior derecha (por defecto)"] }), _jsxs("li", { children: [_jsx("code", { children: "top-left" }), " - Esquina superior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-right" }), " - Esquina inferior derecha"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-left" }), " - Esquina inferior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "top-center" }), " - Centro superior"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-center" }), " - Centro inferior"] })] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-md", children: _jsx("code", { className: "text-sm", children: `<SnackbarContainer position="top-right" />` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _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: "Ancho fijo:" }), " 18rem (288px)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso:" }), " Muestra el tiempo restante en el borde inferior con el color de la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-cierre:" }), " Se cierra autom\u00E1ticamente despu\u00E9s de la duraci\u00F3n especificada (default: 3 segundos)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Pausa al hover:" }), " La barra de progreso se pausa cuando pasas el mouse sobre el snackbar"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre manual:" }), " Bot\u00F3n X en la esquina superior derecha"] }), _jsxs("li", { children: [_jsx("strong", { children: "\u00CDconos:" }), " Soporte para \u00EDconos FontAwesome 5 con \u00EDconos por defecto seg\u00FAn la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Mensajes largos:" }), " El texto se ajusta autom\u00E1ticamente en m\u00FAltiples l\u00EDneas"] }), _jsxs("li", { children: [_jsx("strong", { children: "M\u00FAltiples snackbars:" }), " Soporte para mostrar varios snackbars apilados verticalmente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posiciones:" }), " Configurable en el SnackbarContainer (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)"] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Mejor Pr\u00E1ctica: Rendimiento" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Para un rendimiento \u00F3ptimo, utiliza el hook", " ", _jsx("code", { children: "useSnackbarActions" }), ". Este hook solo proporciona las funciones para disparar notificaciones, evitando que tu componente se re-renderice innecesariamente cuando la lista de snackbars cambie o se actualice su progreso."] }), _jsx("div", { className: "max-w-md mx-auto", children: _jsxs(Card, { className: "p-4 border-dashed", children: [_jsx("h4", { className: "font-medium mb-2 text-green-600", children: "Componente Optimizado" }), _jsxs("p", { className: "text-xs mb-3 text-gray-500", children: ["Este componente utiliza ", _jsx("code", { children: "useSnackbarActions" }), ". Observa c\u00F3mo el contador no aumenta mientras el snackbar est\u00E1 en pantalla."] }), _jsx(OptimizedComponent, {})] }) })] })] }));
};
// --- Componentes de Prueba de Rendimiento ---
const OptimizedComponent = React.memo(() => {
    const { showSnackbar } = useSnackbar();
    // Para detectar renders
    const renderRef = React.useRef(0);
    renderRef.current++;
    // Log para consola
    React.useEffect(() => {
        console.log("%c[Optimized] Renderizado #" + renderRef.current, "color: green");
    });
    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center bg-gray-50 p-2 rounded", children: [_jsx("span", { className: "text-sm", children: "Contador de Renders:" }), _jsx("span", { className: "font-bold text-green-600 px-2 py-0.5 bg-green-50 rounded", children: renderRef.current })] }), _jsx(Button, { variant: "primary", className: "w-full", onClick: () => showSnackbar("Este componente es eficiente", "success"), children: "Disparar Snackbar" }), _jsx("p", { className: "text-[10px] text-gray-400 italic text-center", children: "El contador NO aumenta con los cambios de estado de otros snackbars." })] }));
});
const SnackbarDocs = () => {
    return (_jsxs(SnackbarProvider, { children: [_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Snackbar - Notificaciones y Mensajes", children: _jsx(SnackbarExamples, {}) }) }), _jsx(SnackbarContainer, { position: "top-right" })] }));
};
export default SnackbarDocs;
