import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { IconBell, IconDoor, IconPencil, IconSettings, IconSparkles, } from '@tabler/icons-react';
import AvatarSwitcherCard from './index';
const meta = {
    component: AvatarSwitcherCard,
    title: 'Composed Components/Cards/AvatarSwitcherCard',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `
Card for enabling or disabling a product feature from a settings-style list.

Combines an icon avatar, title, description, optional status pills, optional icon-button actions, and a toggle switch in a single row.

## When to use
- Feature toggles in admin or workspace settings
- Module activation rows with contextual metadata (badges, configuration shortcuts)
- Lists where each item can be turned on/off independently
        `,
            },
        },
    },
    argTypes: {
        icon: {
            description: 'Tabler icon displayed inside the avatar.',
            table: {
                type: { summary: 'TablerIcon' },
            },
            control: false,
        },
        title: {
            description: 'Primary heading shown next to the avatar.',
            table: {
                type: { summary: 'string' },
            },
            control: { type: 'text' },
        },
        description: {
            description: 'Secondary text displayed below the title.',
            table: {
                type: { summary: 'string' },
            },
            control: { type: 'text' },
        },
        checked: {
            description: 'Current on/off state of the switcher.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
            control: { type: 'boolean' },
        },
        disabled: {
            description: 'When `true`, disables the switcher, action buttons, and avatar interaction.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
            control: { type: 'boolean' },
        },
        onChange: {
            description: 'Callback fired when the switcher state changes.',
            table: {
                type: { summary: '(checked: boolean) => void' },
            },
            control: false,
        },
        pills: {
            description: 'Optional status pills rendered before the actions.',
            table: {
                type: { summary: 'PillsProps[]' },
            },
            control: false,
        },
        actions: {
            description: 'Optional icon-button actions rendered before the switcher.',
            table: {
                type: { summary: 'IconButtonProps[]' },
            },
            control: false,
        },
        sx: {
            description: 'MUI `sx` style overrides applied to the root container.',
            table: {
                type: { summary: 'SxProps' },
            },
            control: false,
        },
        slotProps: {
            description: 'Props forwarded to each inner slot of the card.',
            table: {
                type: { summary: 'AvatarSwitcherCardSlotProps' },
            },
            control: false,
        },
    },
    args: {
        title: 'Onboarding',
        description: 'Crea procesos para darle la bienvenida a tus colaboradores.',
        icon: IconDoor,
        checked: false,
        disabled: false,
    },
};
export default meta;
const defaultPills = [
    {
        label: 'New',
        type: 'success',
        hasIcon: false,
    },
    {
        label: 'Beta',
        type: 'highlight',
        hasIcon: false,
    },
];
const settingsAction = {
    id: 'settings',
    'aria-label': 'Configuración',
    variant: 'tertiary',
    children: _jsx(IconSettings, {}),
    onClick: () => alert('[AvatarSwitcherCard] Settings'),
};
const editAction = {
    id: 'edit',
    'aria-label': 'Editar',
    variant: 'tertiary',
    children: _jsx(IconPencil, {}),
    onClick: () => alert('[AvatarSwitcherCard] Edit'),
};
const ControlledCard = ({ checked: initialChecked = false, onChange, showState = false, ...props }) => {
    const [checked, setChecked] = useState(initialChecked);
    useEffect(() => {
        setChecked(initialChecked);
    }, [initialChecked]);
    const card = (_jsx(AvatarSwitcherCard, { ...props, checked: checked, onChange: value => {
            setChecked(value);
            onChange?.(value);
        } }));
    if (!showState) {
        return card;
    }
    return (_jsxs(Stack, { sx: { gap: 2 }, children: [card, _jsx(StatePreview, { checked: checked })] }));
};
const StatePreview = ({ checked }) => (_jsxs(Typography, { variant: "globalXS", color: "text.secondary", children: ["Estado actual: ", _jsx("strong", { children: checked ? 'activado' : 'desactivado' })] }));
export const Default = {
    render: args => (_jsx(ControlledCard, { ...args, showState: true, pills: defaultPills, actions: [settingsAction] })),
    parameters: {
        docs: {
            description: {
                story: 'Default configuration with status pills and a settings action. The switcher is controlled locally so you can toggle it in the canvas.',
            },
        },
    },
};
export const Minimal = {
    render: args => _jsx(ControlledCard, { ...args }),
    parameters: {
        docs: {
            description: {
                story: 'Minimal variant with only avatar, title, description, and switcher — no pills or actions.',
            },
        },
    },
};
export const Checked = {
    render: args => (_jsx(ControlledCard, { ...args, checked: true, pills: defaultPills, actions: [settingsAction] })),
    parameters: {
        docs: {
            description: {
                story: 'Feature row with the switcher initially turned on.',
            },
        },
    },
};
export const Disabled = {
    render: args => (_jsx(ControlledCard, { ...args, checked: true, disabled: true, pills: defaultPills, actions: [settingsAction], slotProps: {
            switcher: {
                disabledTooltip: {
                    description: 'Activa el módulo principal para habilitar esta opción.',
                },
            },
        } })),
    parameters: {
        docs: {
            description: {
                story: 'Disabled row: switcher, actions, and avatar are non-interactive. Use `slotProps.switcher.disabledTooltip` to explain why.',
            },
        },
    },
};
export const WithPillsOnly = {
    render: args => (_jsx(ControlledCard, { ...args, pills: defaultPills })),
    parameters: {
        docs: {
            description: {
                story: 'Status pills without secondary actions.',
            },
        },
    },
};
export const WithActionsOnly = {
    render: args => (_jsx(ControlledCard, { ...args, actions: [editAction, settingsAction] })),
    parameters: {
        docs: {
            description: {
                story: 'Multiple icon-button actions without status pills — useful for configurable modules.',
            },
        },
    },
};
export const LongContent = {
    render: args => (_jsx(ControlledCard, { ...args, title: "Onboarding avanzado para colaboradores con procesos personalizados por \u00E1rea", description: "Crea procesos detallados para darle la bienvenida a tus colaboradores y guiarlos durante sus primeras semanas en la organizaci\u00F3n.", pills: [{ label: 'Beta', type: 'highlight', hasIcon: false }], actions: [settingsAction] })),
    parameters: {
        docs: {
            description: {
                story: 'Stress test for long title and description copy. Use the Width toolbar to validate responsive behavior on narrow viewports.',
            },
        },
    },
};
export const WithSlotProps = {
    render: args => (_jsx(ControlledCard, { ...args, title: "Reconocimientos", description: "Permite que los colaboradores env\u00EDen reconocimientos p\u00FAblicos.", icon: IconSparkles, pills: [{ label: 'New', type: 'success', hasIcon: false }], actions: [settingsAction], slotProps: {
            avatar: {
                color: 'highlight',
                size: 'large',
            },
            title: {
                sx: { maxWidth: 420 },
            },
            switcher: {
                sx: { width: 'auto' },
            },
        } })),
    parameters: {
        docs: {
            description: {
                story: 'Customize inner slots via `slotProps` — avatar appearance, title constraints, and switcher layout.',
            },
        },
    },
};
const FeatureListExample = () => {
    const [onboardingEnabled, setOnboardingEnabled] = useState(true);
    const [recognitionEnabled, setRecognitionEnabled] = useState(false);
    const [notificationsEnabled, setNotificationsEnabled] = useState(true);
    return (_jsxs(Stack, { sx: { gap: 2, width: '100%' }, children: [_jsx(Typography, { variant: "globalM", fontWeight: "fontWeightSemiBold", children: "M\u00F3dulos del workspace" }), _jsx(AvatarSwitcherCard, { title: "Onboarding", description: "Crea procesos para darle la bienvenida a tus colaboradores.", icon: IconDoor, checked: onboardingEnabled, onChange: setOnboardingEnabled, pills: [{ label: 'New', type: 'success', hasIcon: false }], actions: [settingsAction] }), _jsx(AvatarSwitcherCard, { title: "Reconocimientos", description: "Permite enviar reconocimientos p\u00FAblicos entre colaboradores.", icon: IconSparkles, checked: recognitionEnabled, onChange: setRecognitionEnabled, pills: [{ label: 'Beta', type: 'highlight', hasIcon: false }], actions: [editAction, settingsAction] }), _jsx(AvatarSwitcherCard, { title: "Notificaciones push", description: "Env\u00EDa alertas en tiempo real a dispositivos m\u00F3viles.", icon: IconBell, checked: notificationsEnabled, onChange: setNotificationsEnabled, actions: [settingsAction] })] }));
};
export const FeatureList = {
    render: () => _jsx(FeatureListExample, {}),
    parameters: {
        docs: {
            description: {
                story: 'Typical settings-page layout with multiple independent toggles in a vertical list.',
            },
        },
    },
};
