import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Card, RadioButtonGroup, Button } from "../index";
import { useForm, FormProvider } from "react-hook-form";
const FormExample = () => {
    const methods = useForm({
        defaultValues: {
            gender: "male",
            preferences: "notifications",
        },
    });
    const { handleSubmit, watch, register, formState: { errors }, } = methods;
    const onSubmit = () => {
        console.log(watch());
    };
    return (_jsx(FormProvider, { ...methods, children: _jsx(Card, { title: "Formulario con RadioButtonGroup", subtitle: "Ejemplo pr\u00E1ctico de uso de RadioButtonGroup en un formulario con react-hook-form", children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: "G\u00E9nero" }), _jsx(RadioButtonGroup, { options: [
                                            { label: "Masculino", value: "male" },
                                            { label: "Femenino", value: "female" },
                                            { label: "Otro", value: "other" },
                                        ], ...register("gender", {
                                            required: "El género es obligatorio",
                                        }), error: errors.gender?.message })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: "Preferencias" }), _jsx(RadioButtonGroup, { options: [
                                            { label: "Notificaciones", value: "notifications" },
                                            { label: "Email", value: "email" },
                                            { label: "SMS", value: "sms" },
                                        ], ...register("preferences", {
                                            required: "Las preferencias son obligatorias",
                                        }), error: errors.preferences?.message, direction: "horizontal" })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", type: "button", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", type: "submit", children: "Enviar" })] })] }) }) }));
};
const RadioButtonGroupDocs = () => {
    const [selectedValue1, setSelectedValue1] = useState("option1");
    const basicOptions = [
        { label: "Opción 1", value: "option1" },
        { label: "Opción 2", value: "option2" },
        { label: "Opción 3", value: "option3" },
    ];
    const optionsWithNumbers = [
        { label: "Uno", value: 1 },
        { label: "Dos", value: 2 },
        { label: "Tres", value: 3 },
    ];
    // Crear un FormProvider mínimo para los ejemplos en modo controlado
    const controlMethods = useForm();
    return (_jsx(FormProvider, { ...controlMethods, children: _jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "RadioButtonGroup - 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 con options" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "basic-group" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "grupo de radio buttons con options, label a la derecha (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "basic-group-left", labelPosition: "left" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "grupo con labels a la izquierda" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "size-sm", size: "sm" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "size-md", size: "md" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "size-lg", size: "lg" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Direcci\u00F3n del layout" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "direction-vertical", direction: "vertical" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "direcci\u00F3n vertical (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "direction-horizontal", direction: "horizontal" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "direcci\u00F3n horizontal" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "error-group", error: "Debes seleccionar una opci\u00F3n" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "disabled-group", disabled: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Valores num\u00E9ricos" }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: optionsWithNumbers, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "numeric-group" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta valores num\u00E9ricos adem\u00E1s de strings" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Espaciado personalizado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "gap-sm", gap: "sm" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "espaciado peque\u00F1o" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "gap-md", gap: "md" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "espaciado mediano (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "gap-lg", gap: "lg" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "espaciado grande" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de uso" }), _jsx(FormExample, {})] })] }) }) }) }));
};
export default RadioButtonGroupDocs;
