import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Bird, Dog, Fish } from "lucide-react";
import { CardHeader } from "../../CardHeader";
import { IconButton } from "../../IconButton";
import { Image } from "../../Image";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../Accordion";
const meta = {
    title: "Components/Accordion",
    component: Accordion,
    tags: ["autodocs", "!dev"],
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        type: {
            control: "radio",
            options: ["single", "multiple"],
            description: "The type of accordion behavior - single item open or multiple items",
            defaultValue: "single",
            table: {
                category: "Behavior",
            },
        },
        collapsible: {
            control: "boolean",
            description: "Whether the accordion items can be collapsed (only available for single type)",
            defaultValue: true,
            if: { arg: "type", eq: "single" },
            table: {
                category: "Behavior",
            },
        },
        defaultValue: {
            description: 'The default opened item value (only for type="single")',
            control: false,
            table: {
                category: "Behavior",
            },
        },
        variant: {
            control: "radio",
            options: ["clear", "card", "sunk"],
            description: "The visual style variant of the accordion",
            defaultValue: "card",
            table: {
                category: "Appearance",
            },
        },
        showIcons: {
            control: "boolean",
            description: "Whether to show icons in the accordion triggers",
            defaultValue: false,
            table: {
                category: "Appearance",
            },
        },
    },
};
export default meta;
const cityItems = [
    {
        value: "city-1",
        title: "New York",
        subtitle: "The Big Apple",
        description: "Iconic skyline and urban culture",
        image: "https://images.pexels.com/photos/466685/pexels-photo-466685.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
    {
        value: "city-2",
        title: "Tokyo",
        subtitle: "Modern Metropolis",
        description: "Blend of tradition and technology",
        image: "https://images.pexels.com/photos/2506923/pexels-photo-2506923.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
    {
        value: "city-3",
        title: "Paris",
        subtitle: "City of Light",
        description: "Romance and architecture",
        image: "https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=3820&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
];
const landscapeItems = [
    {
        value: "landscape-1",
        title: "Mountains",
        subtitle: "Alpine Views",
        description: "Majestic mountain ranges",
        image: "https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
    {
        value: "landscape-2",
        title: "Beaches",
        subtitle: "Coastal Beauty",
        description: "Pristine shorelines",
        image: "https://images.pexels.com/photos/1032650/pexels-photo-1032650.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
    {
        value: "landscape-3",
        title: "Forests",
        subtitle: "Woodland Wonder",
        description: "Dense forest landscapes",
        image: "https://images.pexels.com/photos/240040/pexels-photo-240040.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
];
const animalItems = [
    {
        value: "animal-1",
        title: "Big Cats",
        icon: _jsx(Dog, {}),
        subtitle: "Majestic Felines",
        description: "Lions, tigers, and leopards",
        image: "https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
    {
        value: "animal-2",
        title: "Marine Life",
        icon: _jsx(Fish, {}),
        subtitle: "Ocean Dwellers",
        description: "Underwater creatures",
        image: "https://plus.unsplash.com/premium_photo-1661835524331-cbba987ba74c?q=80&w=3878&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        value: "animal-3",
        title: "Birds",
        icon: _jsx(Bird, {}),
        subtitle: "Aerial Beauty",
        description: "Colorful avian species",
        image: "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    },
];
export const SingleAccordion = {
    args: {
        type: "single",
        collapsible: true,
        variant: "clear",
        showIcons: true,
    },
    parameters: {
        docs: {
            description: {
                story: "An accordion showcasing different cities and their urban landscapes.",
            },
        },
    },
    render: (args) => (_jsx(Accordion, { type: args.type, collapsible: args.collapsible, variant: args.variant, children: cityItems.map((item) => (_jsxs(AccordionItem, { value: item.value, children: [_jsx(AccordionTrigger, { text: item.title }), _jsxs(AccordionContent, { children: [_jsx(CardHeader, { title: item.subtitle, subtitle: item.description }), _jsx(Image, { src: item.image, alt: item.title, scale: "fill" })] })] }, item.value))) })),
};
export const MultipleAccordion = {
    args: {
        type: "multiple",
        variant: "card",
        showIcons: true,
    },
    parameters: {
        docs: {
            description: {
                story: "An example of an Accordion that allows multiple items to be open simultaneously.",
            },
        },
    },
    render: (args) => (_jsx(Accordion, { type: "multiple", variant: args.variant, children: landscapeItems.map((item) => (_jsxs(AccordionItem, { value: item.value, children: [_jsx(AccordionTrigger, { text: item.title }), _jsxs(AccordionContent, { children: [_jsx(CardHeader, { title: item.subtitle, subtitle: item.description }), _jsx(Image, { src: item.image, alt: item.title, scale: "fill" })] })] }, item.value))) })),
};
export const WithIconsAccordion = {
    args: {
        type: "single",
        collapsible: true,
        variant: "card",
        showIcons: true,
    },
    parameters: {
        docs: {
            description: {
                story: "An accordion displaying different categories of animals and wildlife.",
            },
        },
    },
    render: (args) => (_jsx(Accordion, { type: args.type, collapsible: args.collapsible, variant: args.variant, children: animalItems.map((item) => (_jsxs(AccordionItem, { value: item.value, children: [_jsx(AccordionTrigger, { text: item.title, icon: item.icon }), _jsxs(AccordionContent, { children: [_jsx(CardHeader, { title: item.subtitle, subtitle: item.description, actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: item.icon })] }), _jsx(Image, { src: item.image, alt: item.title, scale: "fill" })] })] }, item.value))) })),
};
//# sourceMappingURL=accordion.stories.js.map