import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useEffect, useRef, useState } from 'react';
import { Box, Stack, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
import { AIButton } 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/AIButton',
    component: AIButton,
    tags: ['autodocs'],
    args: {
        children: 'Button',
        size: 'large',
        icon: 'sparkles',
        variant: 'primary',
    },
    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(AIButton, { ...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(AIButton, { ...args, variant: variant, size: size }, variant))) })] }, size))) })),
};
export const Dark = {
    parameters: { controls: { disable: true } },
    render: StateMatrix,
    globals: { themeMode: 'dark' },
};
const SAMPLE_TEXT = 'La inteligencia artificial está cambiando la forma en que trabajamos. ' +
    'Automatiza tareas repetitivas, genera contenido en segundos y nos deja ' +
    'tiempo para enfocarnos en lo que de verdad importa: pensar, crear y decidir.';
const STREAM_INTERVAL_MS = 90;
const TextGenerationDemo = (args) => {
    const [text, setText] = useState('');
    const [loading, setLoading] = useState(false);
    const [variant, setVariant] = useState(args.variant ?? 'primary');
    const intervalRef = useRef(null);
    const stopStreaming = () => {
        if (intervalRef.current) {
            clearInterval(intervalRef.current);
            intervalRef.current = null;
        }
        setLoading(false);
    };
    const generate = () => {
        const words = SAMPLE_TEXT.split(' ');
        let index = 0;
        setText('');
        setLoading(true);
        intervalRef.current = setInterval(() => {
            index += 1;
            setText(words.slice(0, index).join(' '));
            if (index >= words.length)
                stopStreaming();
        }, STREAM_INTERVAL_MS);
    };
    useEffect(() => () => {
        if (intervalRef.current)
            clearInterval(intervalRef.current);
    }, []);
    return (_jsxs(Stack, { spacing: 2, sx: { width: 440 }, children: [_jsx(ToggleButtonGroup, { exclusive: true, size: "small", color: "primary", value: variant, onChange: (_, next) => next && setVariant(next), children: VARIANTS.map(option => (_jsx(ToggleButton, { value: option, sx: { textTransform: 'capitalize' }, children: option }, option))) }), _jsx(AIButton, { ...args, variant: variant, loading: loading, onClick: generate, onStop: stopStreaming, children: "Generar texto" }), _jsx(Box, { sx: {
                    minHeight: 132,
                    p: 2,
                    borderRadius: 2,
                    border: '1px solid',
                    borderColor: 'divider',
                    bgcolor: 'background.paper',
                }, children: _jsxs(Typography, { variant: "body2", sx: { color: text ? 'text.primary' : 'text.secondary' }, children: [text || 'El texto generado aparecerá acá…', loading && (_jsx(Box, { component: "span", sx: {
                                display: 'inline-block',
                                width: '2px',
                                height: '1em',
                                ml: '2px',
                                bgcolor: 'currentColor',
                                verticalAlign: 'text-bottom',
                                animation: 'iaCaretBlink 1s steps(2, start) infinite',
                                '@keyframes iaCaretBlink': { '50%': { opacity: 0 } },
                            } }))] }) })] }));
};
export const TextGeneration = {
    parameters: {
        controls: {
            exclude: ['variant', 'loading', 'onStop', 'onClick', 'children'],
        },
    },
    render: TextGenerationDemo,
};
