import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { AIIconButton } from '.';
const VARIANTS = ['primary', 'secondary', 'tertiary'];
const STATES = [
    { label: 'Enabled', props: {} },
    { label: 'Loading', props: { loading: true } },
    { label: 'Disabled', props: { disabled: true } },
];
const meta = {
    title: 'Design System/AI/Buttons/AIIconButton',
    component: AIIconButton,
    tags: ['autodocs'],
    args: {
        size: 'large',
        icon: 'sparkles',
        variant: 'primary',
        'aria-label': 'AI action',
    },
    argTypes: {
        variant: {
            control: 'radio',
            options: VARIANTS,
            table: { defaultValue: { summary: 'primary' } },
        },
        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',
        },
        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 }));
/** Type rows × state columns. Hover a button to see the gradient/sparkle animation. */
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))), VARIANTS.map(variant => (_jsxs(Fragment, { children: [_jsx(RowHeader, { label: variant }), STATES.map(({ label, props }) => (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(AIIconButton, { ...args, variant: variant, ...props }) }, label)))] }, variant)))] }));
export const Playground = {
    args: {},
};
export const Overview = {
    parameters: { controls: { disable: true } },
    render: StateMatrix,
};
export const Sizes = {
    parameters: { controls: { disable: true } },
    render: (args) => (_jsx(Stack, { spacing: 3, children: ['large', 'small'].map(size => (_jsxs(Stack, { spacing: 1, children: [_jsx(RowHeader, { label: size }), _jsx(Stack, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", children: VARIANTS.map(variant => (_jsx(AIIconButton, { ...args, variant: variant, size: size }, variant))) })] }, size))) })),
};
export const Dark = {
    parameters: { controls: { disable: true } },
    render: StateMatrix,
    globals: { themeMode: 'dark' },
};
