import type { Preview } from "@storybook/react-vite";
import "../src/styles/storybook.css";

const applyTheme = (theme: string) => {
    if (typeof document === "undefined") return;
    const dark = theme === "dark";
    document.documentElement.classList.toggle("dark", dark);
    document.documentElement.classList.toggle("light", !dark);
};

const preview: Preview = {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },
        layout: "padded",
        backgrounds: { disable: true },
    },
    globalTypes: {
        theme: {
            description: "主题",
            toolbar: {
                title: "主题",
                icon: "mirror",
                items: [
                    { value: "light", title: "亮色" },
                    { value: "dark", title: "暗色" },
                ],
                dynamicTitle: true,
            },
        },
    },
    initialGlobals: {
        theme: "light",
    },
    decorators: [
        (Story, context) => {
            applyTheme(context.globals.theme === "dark" ? "dark" : "light");
            return Story();
        },
    ],
};

export default preview;