import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Stack, Typography } from '@mui/material';
import { IconCopy, IconEdit, IconTrash } from '@tabler/icons-react';
import SectionItem from '.';
const meta = {
    component: SectionItem,
    title: 'Composed Components/SectionItem',
    tags: ['autodocs'],
    argTypes: {
        title: { control: 'text' },
        expanded: { control: 'boolean' },
        isSelected: { control: 'boolean' },
        hasError: { control: 'boolean' },
        errorTooltip: { control: 'text' },
        draggable: { control: false },
        hasDefaultBorder: { control: 'boolean' },
        backgroundColor: { control: 'text' },
        dragId: { control: false },
        dragData: { control: false },
        children: { control: false },
        footer: { control: false },
        menuOptions: { control: false },
        onClick: { control: false },
        onToggleExpand: { control: false },
        sx: { control: false },
    },
    parameters: {
        layout: 'padded',
        docs: {
            controls: { expanded: true },
        },
    },
    decorators: [
        Story => (_jsx(Stack, { sx: { width: 1, maxWidth: 600, mx: 'auto', p: 2 }, children: _jsx(Story, {}) })),
    ],
};
export default meta;
const SampleContent = () => (_jsx(Stack, { sx: { gap: 1 }, children: _jsx(Typography, { variant: "globalXS", children: "This is the collapsible content area. You can place any form fields, lists, or custom UI here." }) }));
const Stateful = (props) => {
    const { defaultExpanded = false, ...rest } = props;
    const [expanded, setExpanded] = useState(defaultExpanded);
    return (_jsx(SectionItem, { ...rest, expanded: expanded, backgroundColor: "white", onToggleExpand: () => setExpanded(prev => !prev), onClick: () => setExpanded(prev => !prev) }));
};
export const Default = {
    args: {
        title: 'Section title',
        expanded: false,
        onToggleExpand: () => undefined,
    },
    render: args => (_jsx(Stateful, { ...args, children: _jsx(SampleContent, {}) })),
};
export const Selected = {
    args: {
        title: 'Selected section',
        expanded: false,
        isSelected: true,
        onToggleExpand: () => undefined,
    },
    render: args => (_jsx(Stateful, { ...args, defaultExpanded: true, children: _jsx(SampleContent, {}) })),
};
export const WithError = {
    args: {
        title: 'Section with error',
        expanded: false,
        hasError: true,
        errorTooltip: 'This section has validation errors',
        onToggleExpand: () => undefined,
    },
    render: args => (_jsx(Stateful, { ...args, children: _jsx(SampleContent, {}) })),
};
export const WithMenuOptions = {
    args: {
        title: 'Section with menu',
        expanded: false,
        onToggleExpand: () => undefined,
        menuOptions: [
            { Icon: IconEdit, title: 'Edit', onClick: () => alert('Edit') },
            {
                Icon: IconCopy,
                title: 'Duplicate',
                onClick: () => alert('Duplicate'),
            },
            {
                Icon: IconTrash,
                title: 'Delete',
                onClick: () => alert('Delete'),
                disabled: true,
            },
        ],
    },
    render: args => (_jsx(Stateful, { ...args, defaultExpanded: true, children: _jsx(SampleContent, {}) })),
};
export const WithFooter = {
    args: {
        title: 'Section with footer',
        expanded: false,
        onToggleExpand: () => undefined,
        footer: (_jsx(Typography, { variant: "globalXS", color: "text.secondary", children: "Footer content goes here" })),
    },
    render: args => (_jsx(Stateful, { ...args, defaultExpanded: true, children: _jsx(SampleContent, {}) })),
};
const InteractiveDemo = () => {
    const [expandedId, setExpandedId] = useState('section-1');
    const [selectedId, setSelectedId] = useState('section-1');
    const sections = [
        { id: 'section-1', title: 'Personal information' },
        { id: 'section-2', title: 'Work experience' },
        { id: 'section-3', title: 'Education' },
    ];
    return (_jsx(Stack, { sx: { gap: 1 }, children: sections.map(section => (_jsx(SectionItem, { title: section.title, expanded: expandedId === section.id, isSelected: selectedId === section.id, onToggleExpand: () => setExpandedId(prev => (prev === section.id ? null : section.id)), backgroundColor: "white", hasDefaultBorder: true, onClick: () => setSelectedId(section.id), menuOptions: [
                {
                    Icon: IconEdit,
                    title: 'Edit',
                    onClick: () => alert(`Edit ${section.title}`),
                },
                {
                    Icon: IconTrash,
                    title: 'Delete',
                    onClick: () => alert(`Delete ${section.title}`),
                },
            ], children: _jsxs(Typography, { variant: "globalXS", children: ["Content for ", section.title] }) }, section.id))) }));
};
export const Interactive = {
    args: {
        title: '',
        expanded: false,
        onToggleExpand: () => undefined,
    },
    render: () => _jsx(InteractiveDemo, {}),
};
