import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Card, DropdownMenu, Button, Badge } from "../index";
const DropdownMenuDocs = () => {
    const [selectedItem, setSelectedItem] = useState(null);
    // Opciones básicas con propiedad label
    const basicOptions = [
        { label: "Editar", id: "edit" },
        { label: "Eliminar", id: "delete" },
        { label: "Compartir", id: "share" },
        { label: "Duplicar", id: "duplicate" },
    ];
    // Opciones con iconos usando renderOption
    const optionsWithIcons = [
        { label: "Editar", icon: "fa-edit", action: "edit" },
        { label: "Eliminar", icon: "fa-trash", action: "delete" },
        { label: "Compartir", icon: "fa-share", action: "share" },
        { label: "Duplicar", icon: "fa-copy", action: "duplicate" },
    ];
    // Opciones complejas usando renderOption
    const complexOptions = [
        { label: "Ver Perfil", icon: "fa-user", action: "profile" },
        { label: "Configuración", icon: "fa-cog", action: "settings" },
        { label: "Cerrar Sesión", icon: "fa-sign-out-alt", action: "logout" },
    ];
    // Opciones con estructura diferente usando getOptionLabel
    const userOptions = [
        { id: 1, name: "Juan Pérez", email: "juan@ejemplo.com", role: "Admin" },
        { id: 2, name: "María García", email: "maria@ejemplo.com", role: "User" },
        { id: 3, name: "Carlos López", email: "carlos@ejemplo.com", role: "User" },
    ];
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownMenu - 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" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente DropdownMenu muestra un men\u00FA desplegable con opciones. Por defecto, muestra un bot\u00F3n con tres puntos horizontales. Al hacer clic, se abre un men\u00FA flotante con las opciones. Las opciones deben ser objetos con una propiedad", " ", _jsx("code", { children: "label" }), " o usar ", _jsx("code", { children: "getOptionLabel" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                setSelectedItem(item);
                                            } }), selectedItem && (_jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Opci\u00F3n seleccionada: ", _jsx("strong", { children: selectedItem.label }), " ", "(id: ", selectedItem.id, ")"] }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Opciones con iconos usando renderOption" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "renderOption" }), " puedes personalizar completamente c\u00F3mo se renderiza cada opci\u00F3n, incluyendo iconos, badges u otros componentes."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: optionsWithIcons, onOptionSelected: (item) => {
                                        console.log("Opción seleccionada:", item);
                                    }, renderOption: (item) => (_jsxs("span", { children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Opciones complejas con renderOption" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo de men\u00FA con opciones que incluyen m\u00FAltiples elementos como badges y diferentes estilos usando ", _jsx("code", { children: "renderOption" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: complexOptions, onOptionSelected: (item) => {
                                        console.log("Opción compleja seleccionada:", item);
                                    }, renderOption: (item) => {
                                        if (item.action === "profile") {
                                            return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("span", { className: "mr-2", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }));
                                        }
                                        if (item.action === "logout") {
                                            return (_jsxs("div", { className: "flex items-center text-[var(--color-danger)]", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }));
                                        }
                                        return (_jsxs("div", { className: "flex items-center", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }));
                                    } }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Usando getOptionLabel" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando los objetos no tienen una propiedad ", _jsx("code", { children: "label" }), ", puedes usar ", _jsx("code", { children: "getOptionLabel" }), " para especificar c\u00F3mo obtener el texto a mostrar."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: userOptions, onOptionSelected: (item) => {
                                        console.log("Usuario seleccionado:", item);
                                    }, getOptionLabel: (item) => item.name }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Reemplazar con opci\u00F3n \u00FAnica (replaceOnSingleOption)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando ", _jsx("code", { children: "replaceOnSingleOption" }), " es ", _jsx("code", { children: "true" }), " y hay una sola opci\u00F3n, el componente muestra directamente la opci\u00F3n en lugar del bot\u00F3n trigger. \u00DAtil cuando solo hay una acci\u00F3n disponible y no necesitas un men\u00FA desplegable."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Con replaceOnSingleOption=false (por defecto):" }), _jsx(DropdownMenu, { options: [{ label: "Única acción", id: "single" }], onOptionSelected: (item) => {
                                                        console.log("Opción seleccionada:", item);
                                                    } })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Con replaceOnSingleOption=true:" }), _jsx(DropdownMenu, { options: [{ label: "Única acción", id: "single" }], onOptionSelected: (item) => {
                                                        console.log("Opción seleccionada:", item);
                                                    }, replaceOnSingleOption: true })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con renderNode personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "renderNode" }), " puedes personalizar el elemento que activa el men\u00FA. En lugar del bot\u00F3n con tres puntos, puedes usar cualquier componente React."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                console.log("Opción seleccionada:", item);
                                            }, renderNode: _jsx(Button, { variant: "primary", icon: "fa-cog", children: "Men\u00FA de Acciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                console.log("Opción seleccionada:", item);
                                            }, renderNode: _jsx(Button, { variant: "outline", icon: "fa-ellipsis-h", children: "M\u00E1s opciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                console.log("Opción seleccionada:", item);
                                            }, renderNode: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[var(--color-bg-secondary)] rounded cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors", children: [_jsx("i", { className: "fal fa-user-circle" }), _jsx("span", { children: "Usuario" }), _jsx("i", { className: "fal fa-chevron-down text-xs" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posicionamiento inteligente" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla. Prueba hacer scroll hacia abajo y abrir el men\u00FA cerca del borde inferior de la pantalla." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                    console.log("Opción seleccionada:", item);
                                                } }) }), _jsx("div", { className: "h-96 flex items-end justify-center", style: { minHeight: "400px" }, children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                    console.log("Opción seleccionada:", item);
                                                } }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo en tabla" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de uso com\u00FAn: men\u00FA de acciones en una fila de tabla." }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "border border-[var(--color-border-default)] rounded", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Nombre" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Email" }), _jsx("th", { className: "px-4 py-2 text-right text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Acciones" })] }) }), _jsx("tbody", { children: userOptions.map((user) => (_jsxs("tr", { className: "border-b border-[var(--color-border-default)] hover:bg-[var(--color-bg-hover)]", children: [_jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-primary)" }, children: user.name }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: user.email }), _jsx("td", { className: "px-4 py-2 text-right", children: _jsx(DropdownMenu, { options: optionsWithIcons, onOptionSelected: (item) => {
                                                                    console.log(`Acción ${item.action} para usuario:`, user.name);
                                                                }, renderOption: (item) => (_jsxs("span", { children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] })) }) })] }, user.id))) })] }) }) })] }), _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: "Gen\u00E9rico y tipado:" }), " El componente es gen\u00E9rico y acepta cualquier tipo de objeto, manteniendo la seguridad de tipos"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posicionamiento inteligente:" }), " El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre autom\u00E1tico:" }), " El men\u00FA se cierra al hacer clic fuera de \u00E9l o al presionar la tecla Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Renderizado flexible:" }), " Usa", " ", _jsx("code", { children: "renderOption" }), " para renderizado personalizado,", " ", _jsx("code", { children: "getOptionLabel" }), " para obtener el label, o la propiedad ", _jsx("code", { children: "label" }), " por defecto"] }), _jsxs("li", { children: [_jsx("strong", { children: "Trigger personalizable:" }), " Puedes usar", " ", _jsx("code", { children: "renderNode" }), " para personalizar el elemento que activa el men\u00FA"] }), _jsxs("li", { children: [_jsx("strong", { children: "Callback de selecci\u00F3n:" }), " El callback", " ", _jsx("code", { children: "onOptionSelected" }), " recibe el objeto completo seleccionado, no solo el \u00EDndice"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos tem\u00E1ticos:" }), " Respeta las variables CSS del tema actual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Soporte para navegaci\u00F3n por teclado (Escape para cerrar)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Opci\u00F3n \u00FAnica:" }), " Con", " ", _jsx("code", { children: "replaceOnSingleOption" }), " puedes mostrar directamente la opci\u00F3n cuando solo hay una disponible, sin necesidad de un men\u00FA desplegable"] })] }) }) })] }), _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: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm 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: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "options" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T[]" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Array de opciones gen\u00E9ricas. Por defecto se asume que tienen una propiedad ", _jsx("code", { children: "label" }), ", o se puede usar", " ", _jsx("code", { children: "getOptionLabel" }), "."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "onOptionSelected" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Callback que se ejecuta cuando se selecciona una opci\u00F3n. Recibe el objeto completo seleccionado." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Elemento personalizado que activa el men\u00FA. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos horizontales." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "getOptionLabel" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Funci\u00F3n para obtener el label de cada opci\u00F3n. Si no se proporciona, se usa la propiedad ", _jsx("code", { children: "label" }), " del objeto."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderOption" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Funci\u00F3n para renderizar completamente cada opci\u00F3n. Si se define, se ignora ", _jsx("code", { children: "getOptionLabel" }), " y la propiedad ", _jsx("code", { children: "label" }), "."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "replaceOnSingleOption" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "boolean" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Si es ", _jsx("code", { children: "true" }), " y hay una sola opci\u00F3n, muestra directamente la opci\u00F3n en lugar del trigger (bot\u00F3n con tres puntos o renderNode). Por defecto es", " ", _jsx("code", { children: "false" }), "."] })] })] })] }) })] })] }) }) }));
};
export default DropdownMenuDocs;
