<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import { createRawSnippet } from 'svelte';
import ExpandableWrapper from './ExpandableWrapper.svelte';

const visibleSnippet = createRawSnippet(() => ({
    render: () =>
        `<div class="w-48 p-2 font-bold text-indigo-600">
            Always visible
        </div>`,
}));

const hiddenSnippet = createRawSnippet(() => ({
    render: () =>
        `<div class="p-4 space-y-2 border-t border-indigo-100 mt-2">
            <div class="h-4 w-full bg-indigo-100 rounded animate-pulse"></div>
            <div class="h-4 w-2/3 bg-indigo-50 rounded animate-pulse"></div>
        </div>`,
}));

const badgeSnippet = createRawSnippet(() => ({
    render: () =>
        `<div class="">
            <span class="badge badge-primary">*</span>
        </div>`,
}));

const { Story } = defineMeta({
    title: 'Shared/ExpandableWrapper',
    component: ExpandableWrapper,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Animated styled wrapper for content that can be expanded and collapsed.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    args: {
        expanded: false,
        disabled: false,
        rotation: 'clockwise',
        visibleContent: visibleSnippet,
        hiddenContent: hiddenSnippet,
    },
    argTypes: {
        expanded: { control: 'boolean' },
        disabled: { control: 'boolean' },
        rotation: {
            control: 'select',
            options: ['clockwise', 'counterclockwise'],
        },
    },
});
</script>

<script lang="ts">
</script>
{/* @ts-ignore */ null}
<Story name="With hidden content">
    {#snippet children(args)}
        <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
            <ExpandableWrapper
                {...args}
                bind:expanded={args.expanded}
            />
        </div>
    {/snippet}
</Story>

{/* @ts-ignore */ null}
<Story name="Disabled" args={{ disabled: true }}>
    {#snippet children(args)}
        <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
            <ExpandableWrapper
                {...args}
                bind:expanded={args.expanded}
                disabled={args.disabled}
            />
        </div>
    {/snippet}
</Story>

{/* @ts-ignore */ null}
<Story name="With badge" args={{ badge: badgeSnippet }}>
    {#snippet children(args)}
        <div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
            <ExpandableWrapper
                {...args}
                bind:expanded={args.expanded}
            />
        </div>
    {/snippet}
</Story>
