import "@mantine/core/styles.css";
import "@mantine/charts/styles.css";
import "@mantine/dates/styles.css";
import "@wealthledger/ui/styles.css";
import "dayjs/locale/ru";
import "../src/shared/i18n";
import { MantineProvider } from "@mantine/core";
import { DatesProvider } from "@mantine/dates";
import type { Preview } from "@storybook/react-vite";
import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";

const colorSchemeManager = {
	get: () => "light" as const,
	set: () => {},
	clear: () => {},
	subscribe: () => {},
	unsubscribe: () => {},
};

const preview: Preview = {
	parameters: {
		layout: "padded",
		options: {
			storySort: {
				order: ["Design System", ["Foundations", "Components"], "Product"],
			},
		},
		controls: { expanded: true },
	},
	decorators: [
		(Story) => (
			<MantineProvider
				cssVariablesResolver={cssVariablesResolver}
				theme={theme}
				forceColorScheme="light"
				colorSchemeManager={colorSchemeManager}
			>
				<DatesProvider settings={{ locale: "ru" }}>
					<Story />
				</DatesProvider>
			</MantineProvider>
		),
	],
};

export default preview;