import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import TextAreaWithTooltip from '../components/TextAreaWithTooltip';
const meta = {
    title: 'Components/TextAreaWithTooltip',
    component: TextAreaWithTooltip,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        value: {
            control: 'text',
            description: 'The text content of the textarea'
        },
        placeholder: {
            control: 'text',
            description: 'Placeholder text shown when textarea is empty'
        },
        maxLength: {
            control: 'number',
            description: 'Maximum number of characters allowed'
        },
        customStyles: {
            control: 'object',
            description: 'Custom CSS properties for styling the container'
        },
    },
};
export default meta;
// Wrapper component to handle state for stories
const TextAreaWithTooltipWithState = (args) => {
    const [value, setValue] = useState(args.value || '');
    const handleChange = (newValue) => {
        setValue(newValue);
        args.handleChange?.(newValue);
    };
    return (_jsxs("div", { style: { width: '400px' }, children: [_jsx(TextAreaWithTooltip, { ...args, value: value, handleChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', padding: '10px', background: '#f5f5f5', fontSize: '12px' }, children: [_jsx("strong", { children: "Output:" }), " ", value] })] }));
};
export const Default = {
    render: TextAreaWithTooltipWithState,
    args: {
        placeholder: 'Enter your text here...',
        handleChange: (value) => console.log('Text changed:', value),
    },
};
export const WithCharacterLimit = {
    render: TextAreaWithTooltipWithState,
    args: {
        placeholder: 'Enter your text (max 100 characters)...',
        maxLength: 100,
        handleChange: (value) => console.log('Text changed:', value),
    },
};
export const WithInitialValue = {
    render: TextAreaWithTooltipWithState,
    args: {
        value: 'This is some initial text content.',
        placeholder: 'Enter your text here...',
        handleChange: (value) => console.log('Text changed:', value),
    },
};
export const WithCustomStyles = {
    render: TextAreaWithTooltipWithState,
    args: {
        placeholder: 'Styled textarea...',
        customStyles: {
            border: '2px solid #3b82f6',
            borderRadius: '12px',
            backgroundColor: '#1f2937',
            minHeight: '150px',
        },
        handleChange: (value) => console.log('Text changed:', value),
    },
};
export const LongTextWithLimit = {
    render: TextAreaWithTooltipWithState,
    args: {
        value: 'This is a longer text that demonstrates how the character limit works. You can see the character count update as you type.',
        placeholder: 'Enter your text...',
        maxLength: 200,
        handleChange: (value) => console.log('Text changed:', value),
    },
};
