import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Building2, Camera, ChevronLeft, ChevronRight, Cpu, Dog, Music, Palette, Plane, Shirt, Trophy, UtensilsCrossed, } from "lucide-react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Card } from "../../Card";
import { CardHeader } from "../../CardHeader";
import { IconButton } from "../../IconButton";
import { Image } from "../../Image";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "../Carousel";
import "../carousel.css";
const meta = {
    title: "Components/Carousel",
    component: Carousel,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Carousel,CarouselContent,CarouselItem,CarouselNext,CarouselPrevious } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: {
                width: "100%",
                height: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        itemsToScroll: {
            control: "number",
            description: "Number of items to scroll when clicking navigation buttons",
            table: {
                category: "Behavior",
                type: { summary: "number" },
                defaultValue: { summary: "1" },
            },
        },
        noSnap: {
            control: "boolean",
            description: "Whether to disable snap scrolling",
            table: {
                category: "Behavior",
                type: { summary: "boolean" },
                defaultValue: { summary: "false" },
            },
        },
        showButtons: {
            control: "boolean",
            description: "Whether to show the navigation buttons",
            table: {
                category: "Appearance",
                type: { summary: "boolean" },
                defaultValue: { summary: "true" },
            },
        },
        variant: {
            control: "radio",
            options: ["card", "sunk"],
            description: "The visual style of the carousel items",
            table: {
                category: "Appearance",
                type: { summary: "'card' | 'sunk'" },
                defaultValue: { summary: "'card'" },
            },
        },
        children: {
            control: false,
            description: "The carousel content and navigation buttons",
            table: {
                category: "Content",
                type: { summary: "ReactNode" },
            },
        },
        className: {
            control: false,
            description: "Additional CSS class name for custom styling",
            table: {
                category: "Styling",
                type: { summary: "string" },
            },
        },
        style: {
            control: false,
            description: "Inline CSS styles for custom styling",
            table: {
                category: "Styling",
                type: { summary: "CSSProperties" },
            },
        },
    },
    tags: ["autodocs", "!dev"],
};
export default meta;
const items = [
    {
        title: "Nature",
        subtitle: "Beautiful landscapes",
        icon: _jsx(Camera, {}),
        imageUrl: "https://plus.unsplash.com/premium_photo-1719943510748-4b4354fbcf56?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Architecture",
        subtitle: "Modern buildings",
        icon: _jsx(Building2, {}),
        imageUrl: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Technology",
        subtitle: "Digital innovation",
        icon: _jsx(Cpu, {}),
        imageUrl: "https://plus.unsplash.com/premium_photo-1663050756824-165ee7eafdac?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Art",
        subtitle: "Creative expressions",
        icon: _jsx(Palette, {}),
        imageUrl: "https://images.unsplash.com/photo-1550532422-378e93ec379c?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Travel",
        subtitle: "World exploration",
        icon: _jsx(Plane, {}),
        imageUrl: "https://images.unsplash.com/photo-1504598318550-17eba1008a68?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Food",
        subtitle: "Culinary delights",
        icon: _jsx(UtensilsCrossed, {}),
        imageUrl: "https://plus.unsplash.com/premium_photo-1673108852141-e8c3c22a4a22?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Sports",
        subtitle: "Athletic moments",
        icon: _jsx(Trophy, {}),
        imageUrl: "https://images.unsplash.com/photo-1471295253337-3ceaaedca402?q=80&w=2992&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Wildlife",
        subtitle: "Animal kingdom",
        icon: _jsx(Dog, {}),
        imageUrl: "https://images.unsplash.com/photo-1600521605615-a8d3a23d8262?q=80&w=3874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Fashion",
        subtitle: "Style trends",
        icon: _jsx(Shirt, {}),
        imageUrl: "https://images.unsplash.com/photo-1521335629791-ce4aec67dd15?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
        title: "Music",
        subtitle: "Sonic experiences",
        icon: _jsx(Music, {}),
        imageUrl: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
];
export const Default = {
    args: {
        itemsToScroll: 1,
        noSnap: false,
        showButtons: true,
        variant: "card",
    },
    parameters: {
        docs: {
            description: {
                story: "Default carousel configuration with single item scrolling and navigation buttons.",
            },
        },
    },
    render: ({ itemsToScroll, noSnap, showButtons, variant }) => {
        const repeatedItems = Array.from({ length: items.length }, (_, index) => ({
            ...items[index % items.length],
            id: `item-${index + 1}`,
        }));
        return (_jsx(Card, { style: { width: "700px" }, children: _jsxs(Carousel, { itemsToScroll: itemsToScroll, noSnap: noSnap, showButtons: showButtons, variant: variant, children: [_jsx(CarouselContent, { children: repeatedItems.map((item) => (_jsxs(CarouselItem, { children: [_jsx(CardHeader, { title: item.title, subtitle: item.subtitle, actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: item.icon })] }), _jsx(Image, { src: item.imageUrl ?? "", alt: `${item.title} image`, scale: "fill" })] }, item.id))) }), _jsx(CarouselPrevious, { icon: _jsx(ChevronLeft, {}) }), _jsx(CarouselNext, { icon: _jsx(ChevronRight, {}) })] }) }));
    },
};
export const SunkVariant = {
    args: {
        ...Default.args,
        variant: "sunk",
    },
    parameters: {
        docs: {
            description: {
                story: "Carousel with the `sunk` variant.",
            },
        },
    },
    render: (args) => {
        const { itemsToScroll, noSnap, showButtons, variant } = args;
        const repeatedItems = Array.from({ length: items.length }, (_, index) => ({
            ...items[index % items.length],
            id: `item-${index + 1}`,
        }));
        return (_jsx(Card, { style: { width: "700px" }, children: _jsxs(Carousel, { itemsToScroll: itemsToScroll, noSnap: noSnap, showButtons: false, variant: variant, children: [_jsx(CarouselContent, { children: repeatedItems.map((item) => (_jsxs(CarouselItem, { children: [_jsx(CardHeader, { title: item.title, subtitle: item.subtitle, actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: item.icon })] }), _jsx(Image, { src: item.imageUrl ?? "", alt: `${item.title} image`, scale: "fill" })] }, item.id))) }), _jsx(CarouselPrevious, { icon: _jsx(ChevronLeft, {}) }), _jsx(CarouselNext, { icon: _jsx(ChevronRight, {}) })] }) }));
    },
};
export const WithRef = {
    args: {
        ...Default.args,
        variant: "card",
    },
    parameters: {
        docs: {
            description: {
                story: "Carousel with the `sunk` variant.",
            },
        },
    },
    render: (args) => {
        const { itemsToScroll, noSnap, variant } = args;
        const repeatedItems = Array.from({ length: items.length }, (_, index) => ({
            ...items[index % items.length],
            id: `item-${index + 1}`,
        }));
        const ref = useRef(null);
        const [canScroll, setCanScroll] = useState({ left: false, right: false });
        const [scrollContainer, setScrollContainer] = useState(null);
        useLayoutEffect(() => {
            if (ref.current?.scrollDivRef.current) {
                setScrollContainer(ref.current.scrollDivRef.current);
            }
        });
        useEffect(() => {
            if (!scrollContainer) {
                return;
            }
            const handleScroll = () => {
                const canScrollLeft = scrollContainer.scrollLeft > 0;
                const canScrollRight = Math.ceil(scrollContainer.scrollLeft) + scrollContainer.offsetWidth <
                    scrollContainer.scrollWidth;
                setCanScroll({ left: canScrollLeft, right: canScrollRight });
            };
            handleScroll();
            scrollContainer.addEventListener("scroll", handleScroll);
            const resizeObserver = new ResizeObserver(handleScroll);
            resizeObserver.observe(scrollContainer);
            const mutationObserver = new MutationObserver(handleScroll);
            mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
            return () => {
                scrollContainer.removeEventListener("scroll", handleScroll);
                resizeObserver.disconnect();
                mutationObserver.disconnect();
            };
        }, [scrollContainer]);
        return (_jsxs(Card, { style: { width: "700px", display: "flex", flexDirection: "column", gap: "10px" }, children: [_jsxs("div", { style: {
                        display: "flex",
                        flexDirection: "row",
                        gap: "10px",
                        justifyContent: "space-between",
                    }, children: [_jsx("span", { children: "Carousel Header" }), _jsxs("div", { style: { display: "flex", flexDirection: "row", gap: "10px" }, children: [_jsx(IconButton, { variant: "tertiary", size: "small", onClick: () => ref.current?.scroll("left"), disabled: !canScroll.left, icon: _jsx(ChevronLeft, {}) }), _jsx(IconButton, { variant: "tertiary", size: "small", onClick: () => ref.current?.scroll("right"), disabled: !canScroll.right, icon: _jsx(ChevronRight, {}) })] })] }), _jsxs(Carousel, { ref: ref, itemsToScroll: itemsToScroll, noSnap: noSnap, showButtons: false, variant: variant, children: [_jsx(CarouselContent, { children: repeatedItems.map((item) => (_jsxs(CarouselItem, { children: [_jsx(CardHeader, { title: item.title, subtitle: item.subtitle, actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: item.icon })] }), _jsx(Image, { src: item.imageUrl ?? "", alt: `${item.title} image`, scale: "fill" })] }, item.id))) }), _jsx(CarouselPrevious, { icon: _jsx(ChevronLeft, {}) }), _jsx(CarouselNext, { icon: _jsx(ChevronRight, {}) })] })] }));
    },
};
//# sourceMappingURL=carousel.stories.js.map