import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import { Box, Typography } from '@mui/material';
import { IconPlus } from '@tabler/icons-react';
import { AIFab } from '.';
const SIZES = ['large', 'small'];
const STATES = [
    { label: 'Enabled', props: {} },
    { label: 'Loading', props: { loading: true } },
    { label: 'Disabled', props: { disabled: true } },
];
const meta = {
    title: 'Design System/AI/Buttons/AIFab',
    component: AIFab,
    tags: ['autodocs'],
    args: {
        children: 'Nuevo',
        size: 'large',
        icon: 'sparkles',
        endIcon: _jsx(IconPlus, {}),
    },
    argTypes: {
        size: {
            control: 'radio',
            options: ['small', 'large'],
            table: { defaultValue: { summary: 'large' } },
        },
        icon: {
            control: 'radio',
            options: ['sparkles', 'ai-pencil', 'ai-photo'],
            table: { defaultValue: { summary: 'sparkles' } },
        },
        loading: {
            control: 'boolean',
            description: 'Shows the progress/stop state',
        },
        endIcon: { table: { disable: true } },
        onStop: { table: { disable: true } },
    },
};
export default meta;
const ColumnHeader = ({ label }) => (_jsx(Typography, { variant: "caption", sx: { fontWeight: 700, textAlign: 'center', color: 'text.secondary' }, children: label }));
const RowHeader = ({ label }) => (_jsx(Typography, { variant: "subtitle2", sx: { textTransform: 'capitalize' }, children: label }));
/** Size rows × state columns (FAB is primary-only). Hover to see the gradient/sparkle. */
const StateMatrix = (args) => (_jsxs(Box, { sx: {
        display: 'inline-grid',
        gridTemplateColumns: `auto repeat(${STATES.length}, 1fr)`,
        gap: 3,
        alignItems: 'center',
    }, children: [_jsx("span", {}), STATES.map(({ label }) => (_jsx(ColumnHeader, { label: label }, label))), SIZES.map(size => (_jsxs(Fragment, { children: [_jsx(RowHeader, { label: size }), STATES.map(({ label, props }) => (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(AIFab, { ...args, size: size, ...props }) }, label)))] }, size)))] }));
export const Playground = {
    args: {},
};
export const Overview = {
    parameters: { controls: { disable: true } },
    render: StateMatrix,
};
export const Dark = {
    parameters: { controls: { disable: true } },
    render: StateMatrix,
    globals: { themeMode: 'dark' },
};
