import type { Preview } from '@storybook/svelte-vite';
import Decorator from './Decorator.svelte';
import StoryStage from './StoryStage.svelte';
import ThemeDecorator from './ThemeDecorator.svelte';
import '../src/app/styles/app.css';

const preview: Preview = {
    globalTypes: {
        viewport: {
            description: 'Viewport size for responsive design',
            defaultValue: 'widgetWide',
            toolbar: {
                icon: 'view',
                items: [
                    {
                        value: 'reset',
                        icon: 'refresh',
                        title: 'Reset viewport',
                    },
                    {
                        value: 'mobile1',
                        icon: 'mobile',
                        title: 'iPhone 5/SE',
                    },
                    {
                        value: 'mobile2',
                        icon: 'mobile',
                        title: 'iPhone 14 Pro Max',
                    },
                    {
                        value: 'tablet',
                        icon: 'tablet',
                        title: 'iPad (Portrait)',
                    },
                    {
                        value: 'desktop',
                        icon: 'desktop',
                        title: 'Desktop (Small)',
                    },
                    {
                        value: 'widgetMedium',
                        icon: 'view',
                        title: 'Widget Medium',
                    },
                    {
                        value: 'widgetWide',
                        icon: 'view',
                        title: 'Widget Wide',
                    },
                    {
                        value: 'widgetExtraWide',
                        icon: 'view',
                        title: 'Widget Extra Wide',
                    },
                    {
                        value: 'fullWidth',
                        icon: 'view',
                        title: 'Full Width',
                    },
                    {
                        value: 'fullScreen',
                        icon: 'expand',
                        title: 'Full Screen',
                    },
                ],
                dynamicTitle: true,
            },
        },
    },
    parameters: {
        layout: 'padded',
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },

        a11y: {
            // 'todo' - show a11y violations in the test UI only
            // 'error' - fail CI on a11y violations
            // 'off' - skip a11y checks entirely
            test: 'todo',
        },

        docs: {
            story: {
                // This sets the default height for the iframe in Autodocs
                iframeHeight: '600px',
            },
        },

        viewport: {
            viewports: {
                // Mobile devices
                mobile1: {
                    name: 'iPhone 5/SE',
                    styles: {
                        width: '320px',
                        height: '568px',
                    },
                },
                mobile2: {
                    name: 'iPhone 14 Pro Max',
                    styles: {
                        width: '414px',
                        height: '896px',
                    },
                },
                // Tablet
                tablet: {
                    name: 'iPad (Portrait)',
                    styles: {
                        width: '834px',
                        height: '1112px',
                    },
                },
                desktop: {
                    name: 'Desktop (Small)',
                    styles: {
                        width: '1024px',
                        height: '1280px',
                    },
                },
                // Widget-specific viewports
                widgetMedium: {
                    name: 'Widget Medium',
                    styles: {
                        width: '768px',
                        height: '800px',
                    },
                },
                widgetWide: {
                    name: 'Widget Wide',
                    styles: {
                        width: '1024px',
                        height: '800px',
                    },
                },
                widgetExtraWide: {
                    name: 'Widget Extra Wide',
                    styles: {
                        width: '1280px',
                        height: '800px',
                    },
                },
                // Full-width viewports
                fullWidth: {
                    name: 'Full Width',
                    styles: {
                        width: '100%',
                        height: '800px',
                    },
                },
                fullScreen: {
                    name: 'Full Screen',
                    styles: {
                        width: '100%',
                        height: '100%',
                    },
                },
            },
        },

        head: `
            <link rel="preconnect" href="https://api.fontshare.com" />
            <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
            <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
            />
            <style>
                body {
                    font-family: "Karla", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
                }
            </style>
        `,
    },

    decorators: [
        // Outermost: initialize ThemeManager for all stories
        story => ({
            Component: ThemeDecorator,
            props: {
                children: story(),
            },
        }),
        // Wrap with providers (TooltipProvider, ResponsiveManager)
        story => ({
            Component: Decorator,
            props: {
                children: story(),
            },
        }),
        // Wrap with StoryStage for presentation styling
        story => ({
            Component: StoryStage,
            props: {
                children: story(),
            },
        }),
    ],
};

export default preview;