import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { useSearchParams } from "react-router-dom";
import { Card, TabsGroup, TabPanel, Button, Badge, Input } from "../index";
const UrlSyncExample = () => {
    const [searchParams] = useSearchParams();
    const urlTab = searchParams.get("tab");
    const tabsForUrl = [
        { id: "overview", label: "Resumen" },
        { id: "details", label: "Detalles" },
        { id: "settings", label: "Configuración" },
    ];
    return (_jsxs("div", { className: "space-y-4", children: [urlTab && (_jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab desde URL:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: urlTab })] }), _jsxs("p", { className: "text-xs mt-1", style: { color: "var(--flysoft-text-secondary)" }, children: ["URL actual:", " ", _jsxs("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: ["?tab=", urlTab] })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Prueba cambiar de tab y observa c\u00F3mo se actualiza la URL. Tambi\u00E9n puedes recargar la p\u00E1gina con", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: "?tab=details" }), "en la URL para ver c\u00F3mo se carga directamente ese tab."] })] })), !urlTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Cambia de tab y observa c\u00F3mo se actualiza la URL. Tambi\u00E9n puedes agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: "?tab=details" }), "manualmente en la URL para cargar directamente ese tab."] }) })), _jsxs(TabsGroup, { tabs: tabsForUrl, paramName: "tab", children: [_jsx(TabPanel, { tabId: "overview", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Resumen General" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de resumen. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=overview" }), "."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-chart-bar", children: "Ver Estad\u00EDsticas" }), _jsx(Button, { variant: "outline", icon: "fa-download", children: "Exportar" })] })] }) }), _jsx(TabPanel, { tabId: "details", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Detalles Completos" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de detalles. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=details" }), "."] }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Si recargas la p\u00E1gina con", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=details" }), "en la URL, este tab se cargar\u00E1 autom\u00E1ticamente."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-info-circle", children: "M\u00E1s Informaci\u00F3n" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Editar" })] })] }) }), _jsx(TabPanel, { tabId: "settings", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Configuraci\u00F3n" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de configuraci\u00F3n. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=settings" }), "."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-cog", children: "Configurar" }), _jsx(Button, { variant: "outline", icon: "fa-save", children: "Guardar" })] })] }) })] })] }));
};
const TabsGroupDocs = () => {
    const [selectedTab, setSelectedTab] = useState("");
    const basicTabs = [
        { id: "users", label: "Usuarios" },
        { id: "roles", label: "Roles" },
        { id: "permissions", label: "Permisos" },
    ];
    const tabsWithNumbers = [
        { id: 1, label: "Primero" },
        { id: 2, label: "Segundo" },
        { id: 3, label: "Tercero" },
    ];
    const tabsWithHeader = [
        { id: "dashboard", label: "Dashboard" },
        { id: "analytics", label: "Analytics" },
        { id: "reports", label: "Reportes" },
    ];
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "TabsGroup - 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: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente TabsGroup permite organizar contenido en pesta\u00F1as. Cada TabPanel muestra su contenido cuando el tab correspondiente est\u00E1 activo." }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs(TabsGroup, { tabs: basicTabs, children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Lista de Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de usuarios. Aqu\u00ED puedes mostrar una lista, formulario, o cualquier contenido relacionado con usuarios." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-user-plus", children: "Agregar Usuario" }), _jsx(Button, { variant: "outline", icon: "fa-search", children: "Buscar" })] })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Gesti\u00F3n de Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de roles. Aqu\u00ED puedes gestionar los diferentes roles del sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-shield-alt", children: "Crear Rol" }), _jsx(Button, { variant: "outline", icon: "fa-list", children: "Ver Todos" })] })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos del Sistema" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de permisos. Aqu\u00ED puedes configurar los permisos disponibles en el sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-key", children: "Asignar Permisos" }), _jsx(Button, { variant: "outline", icon: "fa-cog", children: "Configurar" })] })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con IDs num\u00E9ricos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los tabs pueden usar tanto strings como n\u00FAmeros como identificadores." }), _jsx(Card, { title: "Ejemplo con IDs num\u00E9ricos", children: _jsxs(TabsGroup, { tabs: tabsWithNumbers, children: [_jsx(TabPanel, { tabId: 1, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Primer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 1." })] }) }), _jsx(TabPanel, { tabId: 2, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Segundo Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 2." })] }) }), _jsx(TabPanel, { tabId: 3, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Tercer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 3." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con headerNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop headerNode permite agregar contenido adicional en la misma l\u00EDnea que los tabs, alineado a la derecha. \u00DAtil para botones de acci\u00F3n, badges, o cualquier otro contenido." }), _jsx(Card, { title: "Ejemplo con headerNode", children: _jsxs(TabsGroup, { tabs: tabsWithHeader, headerNode: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "info", children: "Nuevo" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-plus", children: "Agregar" })] }), children: [_jsx(TabPanel, { tabId: "dashboard", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Dashboard" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Vista general del sistema con m\u00E9tricas y estad\u00EDsticas importantes." })] }) }), _jsx(TabPanel, { tabId: "analytics", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Analytics" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "An\u00E1lisis detallado de datos y tendencias del sistema." })] }) }), _jsx(TabPanel, { tabId: "reports", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Reportes" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Generaci\u00F3n y visualizaci\u00F3n de reportes del sistema." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onChangeTab" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop onChangeTab permite ejecutar una funci\u00F3n cuando se cambia de tab. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar de pesta\u00F1a." }), _jsx(Card, { title: "Ejemplo con onChangeTab", children: _jsxs("div", { className: "space-y-4", children: [selectedTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab seleccionado:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: selectedTab })] }) })), _jsxs(TabsGroup, { tabs: basicTabs, onChangeTab: (tab) => setSelectedTab(tab), children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Sincronizaci\u00F3n con URL (paramName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "permite sincronizar el tab activo con los par\u00E1metros de la URL. Cuando cambias de tab, se actualiza la URL autom\u00E1ticamente. Si la URL ya contiene el par\u00E1metro al cargar la p\u00E1gina, se mostrar\u00E1 el tab correspondiente. Esto es \u00FAtil para compartir enlaces directos a un tab espec\u00EDfico o para mantener el estado al navegar con el bot\u00F3n atr\u00E1s/adelante del navegador."] }), _jsx(Card, { title: "Ejemplo con sincronizaci\u00F3n de URL", children: _jsx(UrlSyncExample, {}) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con formularios" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando TabsGroup con TabPanel para organizar formularios en diferentes secciones." }), _jsx(Card, { title: "Formulario de Configuraci\u00F3n", children: _jsxs(TabsGroup, { tabs: [
                                        { id: "personal", label: "Personal" },
                                        { id: "contact", label: "Contacto" },
                                        { id: "security", label: "Seguridad" },
                                    ], headerNode: _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar Cambios" }), children: [_jsx(TabPanel, { tabId: "personal", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Informaci\u00F3n Personal" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "Ingresa tu apellido", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] })] }) }), _jsx(TabPanel, { tabId: "contact", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Informaci\u00F3n de Contacto" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" }), _jsx(Input, { label: "Direcci\u00F3n", placeholder: "Calle, n\u00FAmero, ciudad", icon: "fa-map-marker-alt" })] })] }) }), _jsx(TabPanel, { tabId: "security", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Configuraci\u00F3n de Seguridad" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "Ingresa tu contrase\u00F1a actual", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "Ingresa tu nueva contrase\u00F1a", icon: "fa-key" }), _jsx(Input, { label: "Confirmar Contrase\u00F1a", type: "password", placeholder: "Confirma tu nueva contrase\u00F1a", icon: "fa-key" })] })] }) })] }) })] })] }) }) }));
};
export default TabsGroupDocs;
