import React, { useState } from 'react';
import { Button } from '../button/react';
import { Expandable } from './react';
export default {
    title: 'Layout/Expandable',
    render(args) {
        return (React.createElement(Expandable, { ...args },
            React.createElement("p", null, "This is the expandable content that can be shown or hidden."),
            React.createElement("p", null, "It can contain multiple paragraphs and other elements.")));
    },
    component: Expandable,
};
export const Default = {
    args: {
        title: "I'm expandable",
        expanded: false,
        box: false,
        bleed: false,
        animated: false,
        noChevron: false,
    },
};
export const Expanded = {
    args: {
        title: "I'm expanded by default",
        expanded: true,
        box: false,
        bleed: false,
        animated: false,
        noChevron: false,
    },
};
export const Box = {
    args: {
        title: "I'm a box expandable",
        expanded: false,
        box: true,
        bleed: false,
        animated: false,
        noChevron: false,
    },
};
export const Animated = {
    args: {
        title: "I'm animated",
        expanded: false,
        box: true,
        bleed: false,
        animated: true,
        noChevron: false,
    },
};
export const WithHeading = {
    args: {
        title: "I'm wrapped in h2",
        expanded: false,
        box: true,
        bleed: false,
        animated: false,
        noChevron: false,
        headingLevel: 2,
    },
};
export const NoChevron = {
    args: {
        title: 'I have no chevron',
        expanded: false,
        box: false,
        bleed: false,
        animated: false,
        noChevron: true,
    },
};
export const CustomTitle = {
    args: {
        expanded: false,
        box: true,
        bleed: false,
        animated: false,
        noChevron: false,
    },
    render(args) {
        return (React.createElement(Expandable, { ...args },
            React.createElement("div", { slot: "title", style: { display: 'flex', alignItems: 'center' } },
                React.createElement("span", { style: { marginRight: '8px' } }, "\uD83C\uDFAF"),
                React.createElement("span", null, "Custom title with icon")),
            React.createElement("p", null, "This expandable has a custom title slot with an icon.")));
    },
};
export const NoTitle = {
    args: {
        expanded: true,
        box: true,
        animated: true,
    },
    render(args) {
        const [expanded, setExpanded] = useState(false);
        return (React.createElement(React.Fragment, null,
            React.createElement(Button, { onClick: () => setExpanded(!expanded), "aria-label": "Toggle expandable content without title", "aria-controls": "expandableWithoutTitle" }, "Toggle"),
            React.createElement(Expandable, { ...args, id: "expandableWithoutTitle", expanded: expanded },
                React.createElement("p", null, "with expanded content"))));
    },
};
